Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
SimStadt
3DClient4SimStadtAPI
Commits
b045e623
Commit
b045e623
authored
Dec 19, 2021
by
BujarMuharemi
Browse files
added beautify extension and formated all files
parent
613d4534
Changes
6
Show whitespace changes
Inline
Side-by-side
.jsbeautifyrc
0 → 100644
View file @
b045e623
{
"indent_size": 4,
"indent_char": " ",
"indent_level": 0,
"end-with-newline": true,
"indent_with_tabs": false,
"preserve_newlines": true,
"max_preserve_newlines": 10,
"jslint_happy": false,
"space_after_anon_function": false,
"brace_style": "collapse,preserve-inline",
"keep_array_indentation": false,
"keep_function_indentation": false,
"space_before_conditional": true,
"break_chained_methods": false,
"eval_code": false,
"unescape_strings": false,
"wrap_line_length": 0,
"css": {
"selector_separator_newline": false
}
}
\ No newline at end of file
public/js/connectToAPI.js
View file @
b045e623
...
...
@@ -51,7 +51,7 @@ async function fetchshadowDataJSON() {
var
bottomLat
=
coordinatesBB
[
1
]
var
leftLng
=
coordinatesBB
[
0
]
var
rightLng
=
coordinatesBB
[
2
]
var
topLat
=
coordinatesBB
[
3
]
//
var
topLat
=
coordinatesBB
[
3
]
//
var
day
=
"
1
"
;
const
response
=
await
fetch
(
url2
+
day
,
{
method
:
"
POST
"
,
...
...
@@ -80,9 +80,9 @@ async function fetchDataJSON() {
var
bottomLat
=
coordinatesBB
[
1
]
var
leftLng
=
coordinatesBB
[
0
]
var
rightLng
=
coordinatesBB
[
2
]
var
topLat
=
coordinatesBB
[
3
]
//
var
topLat
=
coordinatesBB
[
3
]
//
const
response
=
await
fetch
(
url
,
{
const
response
=
await
fetch
(
url
,
{
method
:
"
POST
"
,
body
:
JSON
.
stringify
({
"
boundingBox
"
:
{
...
...
@@ -121,7 +121,7 @@ const response = await fetch(url, {
document
.
getElementById
(
"
loader
"
).
style
.
visibility
=
"
hidden
"
async
function
getLocalShadowdata
(){
async
function
getLocalShadowdata
()
{
// gets the response from the api and put it inside a constant
const
response
=
await
fetch
(
localShadowData
);
//the response have to be converted to json type file, so it can be used
...
...
@@ -129,29 +129,29 @@ async function getLocalShadowdata(){
console
.
log
(
data
)
// shadowData=data;
return
data
;
}
}
function
processData
()
{
console
.
log
(
coordinatesBB
)
console
.
log
(
"
Waiting for data....
"
)
timeout
(
25000
,
fetchshadowDataJSON
()).
then
((
response
)
=>
{
timeout
(
25000
,
fetchshadowDataJSON
()).
then
((
response
)
=>
{
console
.
log
(
response
)
shadowdata
=
response
;
}).
catch
((
error
)
=>
{
//catching the error(no connection)/ timeout and displaying an alert for the user
shadowdata
=
response
;
}).
catch
((
error
)
=>
{
//catching the error(no connection)/ timeout and displaying an alert for the user
// shadowdata= getLocalShadowdata();
console
.
log
(
shadowdata
);
//loadLocalAPIshadowData here...
})
timeout
(
10000
,
fetchPvPotentialJSON
()).
then
((
response
)
=>
{
timeout
(
10000
,
fetchPvPotentialJSON
()).
then
((
response
)
=>
{
console
.
log
(
response
)
}).
catch
((
error
)
=>
{
console
.
log
(
error
)
})
timeout
(
10000
,
fetchDataJSON
()).
then
((
response
)
=>
{
timeout
(
10000
,
fetchDataJSON
()).
then
((
response
)
=>
{
calculateData
(
response
);
}).
catch
((
error
)
=>
{
console
.
log
(
error
)
...
...
@@ -169,7 +169,7 @@ function processData() {
function
calculateData
(
data
){
function
calculateData
(
data
)
{
console
.
log
(
data
);
document
.
getElementById
(
"
cesiumContainer
"
).
style
.
opacity
=
"
1
"
;
document
.
getElementById
(
"
loader
"
).
style
.
visibility
=
"
hidden
"
...
...
@@ -299,7 +299,7 @@ function calculateData(data){
availableAttributes
()
//color buildings with heating demand
document
.
getElementById
(
"
checkbox2
"
).
addEventListener
(
"
change
"
,
function
()
{
document
.
getElementById
(
"
checkbox2
"
).
addEventListener
(
"
change
"
,
function
()
{
if
(
this
.
checked
)
{
tileContent
.
forEach
(
t
=>
{
let
tileID
=
t
.
getProperty
(
"
gml_parent_id
"
)
...
...
@@ -318,7 +318,7 @@ function calculateData(data){
})
//color surfaces with uValue
document
.
getElementById
(
"
checkbox1
"
).
addEventListener
(
"
change
"
,
function
()
{
document
.
getElementById
(
"
checkbox1
"
).
addEventListener
(
"
change
"
,
function
()
{
if
(
this
.
checked
)
{
tileContent
.
forEach
(
t
=>
{
let
tileID
=
t
.
getProperty
(
"
gml_id
"
)
...
...
@@ -377,13 +377,13 @@ var modal = document.getElementById("myModal");
var
span
=
document
.
getElementsByClassName
(
"
close
"
)[
0
];
//close the modal
span
.
onclick
=
function
()
{
span
.
onclick
=
function
()
{
modal
.
style
.
display
=
"
none
"
;
deleteTilesetButtons
()
}
// modal closes, when the user clicks anywhere outside of the modal
window
.
onclick
=
function
(
event
)
{
window
.
onclick
=
function
(
event
)
{
if
(
event
.
target
==
modal
)
{
modal
.
style
.
display
=
"
none
"
;
deleteTilesetButtons
()
...
...
@@ -410,12 +410,12 @@ function timeout(ms, promise) {
//fetching the tileset and handling the connection
async
function
fetchTileset
()
{
timeout
(
1000
,
fetch
(
tilesetURL
)).
then
((
response
)
=>
{
async
function
fetchTileset
()
{
timeout
(
1000
,
fetch
(
tilesetURL
)).
then
((
response
)
=>
{
loadAndZoomToTileset
(
tilesetURL
);
}).
catch
((
error
)
=>
{
//catching the error(no connection)/ timeout and displaying an alert for the user
}).
catch
((
error
)
=>
{
//catching the error(no connection)/ timeout and displaying an alert for the user
//var errorString = error["stack"]+"\n"+error["message"]; // formatting the error array
swal
({
text
:
"
Could not connect to Server. Using now: local data
"
,
icon
:
"
info
"
}
);
swal
({
text
:
"
Could not connect to Server. Using now: local data
"
,
icon
:
"
info
"
});
console
.
log
(
"
Using local test data
"
);
loadAndZoomToTileset
(
localTestTileset
);
//TODO#3: fix the link so the local tileset can be loaded
})
...
...
@@ -446,8 +446,8 @@ function loadTileset() {
//var userurl = document.getElementById("3Durl").value; //returns the chosen area from the dropdown
}
//loads the tileset from the url into the cesium viewer and zooms to it
function
loadAndZoomToTileset
(
url
){
tileset
=
viewer
.
scene
.
primitives
.
add
(
new
Cesium
.
Cesium3DTileset
({
function
loadAndZoomToTileset
(
url
)
{
tileset
=
viewer
.
scene
.
primitives
.
add
(
new
Cesium
.
Cesium3DTileset
({
url
:
url
}));
...
...
@@ -469,7 +469,7 @@ function useContent(content) {
document
.
getElementById
(
"
myList
"
).
appendChild
(
element
);
element
.
onclick
=
function
()
{
element
.
onclick
=
function
()
{
tileset
=
viewer
.
scene
.
primitives
.
add
(
new
Cesium
.
Cesium3DTileset
({
url
:
cont
.
href
}));
...
...
@@ -496,7 +496,7 @@ function deleteTilesetButtons() {
var
len
=
x
.
length
//checking if there are even tileset to delete
if
(
x
.
length
>
0
){
if
(
x
.
length
>
0
)
{
parentNode
=
x
[
0
].
parentNode
;
for
(
var
i
=
0
;
i
<
len
;
i
++
)
{
parentNode
.
removeChild
(
x
[
0
]);
...
...
public/js/globe.js
View file @
b045e623
...
...
@@ -31,11 +31,11 @@ nameOverlay.style.padding = "4px";
nameOverlay
.
style
.
backgroundColor
=
"
white
"
;
var
chosenDate
=
new
Cesium
.
GregorianDate
(
2021
,
12
,
2
,
11
);
//the chosen Date from the Timeline
var
chosenDate
=
new
Cesium
.
GregorianDate
(
2021
,
12
,
2
,
11
);
//the chosen Date from the Timeline
//getting clicked Date from the timeline element
viewer
.
timeline
.
container
.
onmouseup
=
(
e
)
=>
{
var
julianDate
=
viewer
.
clock
.
currentTime
;
var
julianDate
=
viewer
.
clock
.
currentTime
;
Cesium
.
JulianDate
.
toGregorianDate
(
julianDate
,
chosenDate
);
//console.log(chosenDate);
}
...
...
@@ -69,7 +69,7 @@ var radio = document.getElementById('radio-group');
var
gmlID
;
radio
.
addEventListener
(
'
click
'
,
function
()
{
radio
.
addEventListener
(
'
click
'
,
function
()
{
//hide chart for individual buildings
singleChart
.
style
.
visibility
=
'
hidden
'
;
...
...
@@ -125,7 +125,7 @@ viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement) {
}
var
name
=
pickedFeature
.
getProperty
(
"
gml_id
"
);
var
shadowhourvaluepercent
=
0
;
nameOverlay
.
textContent
=
"
ID:
"
+
name
+
"
\t
shadowvalue:
"
+
shadowhourvaluepercent
;
// Highlight the feature if it's not already selected.
selectedFeatures
.
forEach
(
s
=>
{
...
...
@@ -139,11 +139,11 @@ viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement) {
if
(
pickedselect
)
{
tileContent
.
forEach
(
t
=>
{
if
(
t
===
pickedFeature
)
{
if
(
t
.
getProperty
(
"
feature_type
"
)
===
"
RoofSurface
"
){
if
(
t
.
getProperty
(
"
feature_type
"
)
===
"
RoofSurface
"
)
{
highlightedFeatures
.
push
(
new
featurevar
(
t
,
t
.
color
));
t
.
color
=
Cesium
.
Color
.
GREEN
;
}
else
{
}
else
{
highlightedFeatures
.
push
(
new
featurevar
(
t
,
t
.
color
));
t
.
color
=
Cesium
.
Color
.
YELLOW
;
}
...
...
@@ -155,7 +155,7 @@ viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement) {
}
//Building View
else
if
(
document
.
getElementById
(
"
building
"
).
checked
){
else
if
(
document
.
getElementById
(
"
building
"
).
checked
)
{
// A feature was picked, so show it's overlay content
nameOverlay
.
style
.
display
=
"
block
"
;
nameOverlay
.
style
.
bottom
=
viewer
.
canvas
.
clientHeight
-
movement
.
endPosition
.
y
+
"
px
"
;
...
...
@@ -183,11 +183,11 @@ viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement) {
}
//Roof View
else
if
(
document
.
getElementById
(
"
roof
"
).
checked
){
else
if
(
document
.
getElementById
(
"
roof
"
).
checked
)
{
console
.
log
(
"
clicked when in roof view and on hover
"
);
}
},
},
Cesium
.
ScreenSpaceEventType
.
MOUSE_MOVE
);
...
...
@@ -199,7 +199,7 @@ var pickHeatedVolume
var
pickTotalSurfaceArea
=
0
var
pickRoofType
var
pickUValue
var
shadowHourValue
=
0
;
var
shadowHourValue
=
0
;
//Color a feature on selection and show metadata in the InfoBox
...
...
@@ -286,15 +286,15 @@ viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
//highlight newly selected feature
tileContent
.
forEach
(
t
=>
{
if
(
t
===
pickedFeature
)
{
console
.
log
(
t
.
getProperty
(
"
description
"
)
+
"
\n
"
+
t
.
getProperty
(
"
feature_type
"
)
+
"
\n
"
+
t
.
getProperty
(
"
gml_id
"
)
+
"
\n
"
+
t
.
getProperty
(
"
gml_parent_id
"
));
console
.
log
(
t
.
getProperty
(
"
description
"
)
+
"
\n
"
+
t
.
getProperty
(
"
feature_type
"
)
+
"
\n
"
+
t
.
getProperty
(
"
gml_id
"
)
+
"
\n
"
+
t
.
getProperty
(
"
gml_parent_id
"
));
t
.
color
=
Cesium
.
Color
.
LIME
;
//color surfaces depending on their shadow value
for
(
const
[
key
,
value
]
of
Object
.
entries
(
shadowdata
))
{
//looping threw the shadowdata array
if
(
key
===
t
.
getProperty
(
"
gml_id
"
)){
//checking if the ids of the current surface match the id in the shadowdata array
if
(
key
===
t
.
getProperty
(
"
gml_id
"
))
{
//checking if the ids of the current surface match the id in the shadowdata array
//console.log("hour:",chosenDate.hour);
shadowHourValue
=
value
[
chosenDate
.
hour
-
1
]
//getting the current chosen hour from the timeline
shadowHourValue
=
value
[
chosenDate
.
hour
-
1
]
//getting the current chosen hour from the timeline
//console.log("shadowHourValue",shadowHourValue);
t
.
color
=
Cesium
.
Color
.
fromCssColorString
(
getShadowPalette
(
shadowHourValue
));
//coloring the surface
...
...
@@ -317,7 +317,7 @@ viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
});
}
var
shadowhourvaluepercent
=
100
-
(
shadowHourValue
*
100
)
var
shadowhourvaluepercent
=
100
-
(
shadowHourValue
*
100
)
//set feature infobox description (surface view)
var
featureName
=
pickedFeature
.
getProperty
(
"
name
"
);
selectedEntity
.
name
=
featureName
;
...
...
@@ -338,7 +338,7 @@ viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
}
//Building View
else
if
(
document
.
getElementById
(
"
building
"
).
checked
){
else
if
(
document
.
getElementById
(
"
building
"
).
checked
)
{
resetRoofColors
();
//save the selected feature's original color
if
(
pickedhigh
)
{
...
...
@@ -393,16 +393,16 @@ viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
//Roof View
//BUG: shows random attributes ui element ??
else
if
(
document
.
getElementById
(
"
roof
"
).
checked
){
else
if
(
document
.
getElementById
(
"
roof
"
).
checked
)
{
console
.
log
(
"
clicked when in roof view and on click
"
);
//looping threw all surfaces
tileContent
.
forEach
(
t
=>
{
if
(
t
.
getProperty
(
"
description
"
).
includes
(
"
Roof
"
))
{
//HACK: checking if the are a roof surface (should come from feature_type)
if
(
t
.
getProperty
(
"
description
"
).
includes
(
"
Roof
"
))
{
//HACK: checking if the are a roof surface (should come from feature_type)
for
(
const
[
key
,
value
]
of
Object
.
entries
(
shadowdata
))
{
//looping threw the shadowdata array
if
(
key
===
t
.
getProperty
(
"
gml_id
"
))
{
//checking the id
console
.
log
(
value
);
shadowHourValue
=
value
[
chosenDate
.
hour
-
1
];
//getting the current chosen hour from the timeline
if
(
key
===
t
.
getProperty
(
"
gml_id
"
))
{
//checking the id
//
console.log(value);
shadowHourValue
=
value
[
chosenDate
.
hour
-
1
];
//getting the current chosen hour from the timeline
t
.
color
=
Cesium
.
Color
.
fromCssColorString
(
getShadowPalette
(
shadowHourValue
));
//coloring the surface
}
}
...
...
@@ -412,7 +412,7 @@ viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
});
}
},
},
Cesium
.
ScreenSpaceEventType
.
LEFT_CLICK
);
...
...
@@ -483,11 +483,11 @@ function fillTableProperties(gID, sID) {
}
function
resetRoofColors
(){
function
resetRoofColors
()
{
tileContent
.
forEach
(
t
=>
{
if
(
t
.
getProperty
(
"
description
"
).
includes
(
"
Roof
"
))
{
if
(
t
.
getProperty
(
"
description
"
).
includes
(
"
Roof
"
))
{
for
(
const
[
key
,
value
]
of
Object
.
entries
(
shadowdata
))
{
if
(
key
===
t
.
getProperty
(
"
gml_id
"
))
{
if
(
key
===
t
.
getProperty
(
"
gml_id
"
))
{
t
.
color
=
Cesium
.
Color
.
WHITE
;
}
}
...
...
public/js/shadowPalette.js
View file @
b045e623
//Shadow palette for coloring the roofs
//color pallet white->black
var
colorPalette
=
[
'
#ffffff
'
,
'
#f0f0f0
'
,
'
#d9d9d9
'
,
'
#bdbdbd
'
,
'
#969696
'
,
'
#737373
'
,
'
#525252
'
,
'
#252525
'
];
var
colorPalette
=
[
'
#ffffff
'
,
'
#f0f0f0
'
,
'
#d9d9d9
'
,
'
#bdbdbd
'
,
'
#969696
'
,
'
#737373
'
,
'
#525252
'
,
'
#252525
'
];
const
shadowPalette
=
colorPalette
.
reverse
();
//returns the responding color from the shadowPalette, depending on the inputShadowValue(0 to 1 in float)
function
getShadowPalette
(
inputShadowValue
)
{
function
getShadowPalette
(
inputShadowValue
)
{
//checking for the float values
var
index
=
Math
.
ceil
((
shadowPalette
.
length
-
1
)
*
inputShadowValue
);
var
index
=
Math
.
ceil
((
shadowPalette
.
length
-
1
)
*
inputShadowValue
);
//console.log(inputShadowValue,"---",shadowPalette[index]);
return
shadowPalette
[
index
];
}
public/js/sidebar.js
View file @
b045e623
...
...
@@ -4,7 +4,7 @@ var radio = document.getElementById('radio-group');
var
filterswitches
=
document
.
getElementById
(
'
filterswitches
'
);
//Show / hide chart
chartButton
.
addEventListener
(
'
click
'
,
function
()
{
chartButton
.
addEventListener
(
'
click
'
,
function
()
{
//sets as default attribute building function
myChartArea
(
"
bar
"
,
"
Building Function
"
,
1
,
"
Building Type
"
,
"
Frequency
"
,
coloR
);
addGlobalData
(
areaChart
,
buildingType
,
btFrequency
,
btFrequency
.
length
)
...
...
@@ -24,7 +24,7 @@ chartButton.addEventListener('click', function () {
}
},
false
);
heatingdemand
.
addEventListener
(
'
click
'
,
function
()
{
heatingdemand
.
addEventListener
(
'
click
'
,
function
()
{
var
x
=
document
.
getElementById
(
'
heat-demand-legend
'
);
if
(
!
document
.
getElementById
(
'
checkbox2
'
).
checked
)
{
x
.
style
.
visibility
=
'
hidden
'
;
...
...
@@ -33,7 +33,7 @@ heatingdemand.addEventListener('click', function () {
}
},
false
);
radio
.
addEventListener
(
'
click
'
,
function
()
{
radio
.
addEventListener
(
'
click
'
,
function
()
{
if
(
document
.
getElementById
(
"
surface
"
).
checked
)
{
document
.
getElementById
(
"
checkbox1
"
).
disabled
=
false
;
document
.
getElementById
(
"
checkbox2
"
).
disabled
=
true
;
...
...
@@ -42,8 +42,7 @@ radio.addEventListener('click', function () {
document
.
getElementById
(
'
heat-demand-legend
'
).
style
.
visibility
=
'
hidden
'
;
tileContent
.
forEach
(
t
=>
t
.
color
=
new
Cesium
.
Color
(
1
,
1
,
1
,
1
))
}
}
else
{
}
else
{
document
.
getElementById
(
"
checkbox1
"
).
disabled
=
true
;
document
.
getElementById
(
"
checkbox2
"
).
disabled
=
false
;
if
(
document
.
getElementById
(
"
checkbox1
"
).
checked
)
{
...
...
@@ -53,7 +52,7 @@ radio.addEventListener('click', function () {
}
},
false
);
filterswitches
.
addEventListener
(
'
click
'
,
function
()
{
filterswitches
.
addEventListener
(
'
click
'
,
function
()
{
if
(
drawBox
===
false
)
{
swal
(
"
CAN'T LOAD DATA!
"
,
"
mark an area first!
"
,
"
error
"
);
document
.
getElementById
(
"
checkbox2
"
).
disabled
=
true
;
...
...
@@ -62,8 +61,7 @@ filterswitches.addEventListener('click', function () {
if
(
document
.
getElementById
(
"
surface
"
).
checked
)
{
document
.
getElementById
(
"
checkbox1
"
).
disabled
=
false
;
document
.
getElementById
(
"
checkbox2
"
).
disabled
=
true
;
}
else
{
}
else
{
document
.
getElementById
(
"
checkbox1
"
).
disabled
=
true
;
document
.
getElementById
(
"
checkbox2
"
).
disabled
=
false
;
}
...
...
@@ -80,7 +78,7 @@ var dropdown = document.getElementsByClassName("dropdown-btn");
var
i
;
for
(
i
=
0
;
i
<
dropdown
.
length
;
i
++
)
{
dropdown
[
i
].
addEventListener
(
"
click
"
,
function
()
{
dropdown
[
i
].
addEventListener
(
"
click
"
,
function
()
{
this
.
classList
.
toggle
(
"
active
"
);
var
dropdownContent
=
this
.
nextElementSibling
;
if
(
dropdownContent
.
style
.
display
===
"
block
"
)
{
...
...
public/js/testingAPIValues.js
View file @
b045e623
...
...
@@ -104,7 +104,7 @@ function test() {
sortMap
()
//color buildings with heating demand
document
.
getElementById
(
"
checkbox2
"
).
addEventListener
(
"
change
"
,
function
()
{
document
.
getElementById
(
"
checkbox2
"
).
addEventListener
(
"
change
"
,
function
()
{
if
(
this
.
checked
)
{
tileContent
.
forEach
(
t
=>
{
let
tileID
=
t
.
getProperty
(
"
gml_parent_id
"
)
...
...
@@ -124,7 +124,7 @@ function test() {
})
//color surfaces with uValue
document
.
getElementById
(
"
checkbox1
"
).
addEventListener
(
"
change
"
,
function
()
{
document
.
getElementById
(
"
checkbox1
"
).
addEventListener
(
"
change
"
,
function
()
{
if
(
this
.
checked
)
{
tileContent
.
forEach
(
t
=>
{
let
tileID
=
t
.
getProperty
(
"
gml_id
"
)
...
...
@@ -143,4 +143,3 @@ function test() {
}
})
}
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