diff --git a/vcm/config.json b/vcm/config.json index d1e6a1e6c1fcef09f2215000ad203808e06512a3..35ba0e66b2227f030ec8d600ec1b3850d97199fe 100644 --- a/vcm/config.json +++ b/vcm/config.json @@ -320,11 +320,11 @@ "<img style='padding-top:10px' src='../../images/content/contentstoeckach/Stoeckach.jpg' usemap='#image-map' alt='Simply Easy Learning' width='375'>", "<map name='image-map'>", - "<area id='mapElectricityID' alt='' title='electricity' shape='rect' coords='0,93,372,117' style='color:blue;border-style:dotted;' onclick='EnergiekonzeptFunction(\"Electricity\")' />", - "<area id='mapHeatID' alt='' title='heat' shape='rect' coords='0,202,375,227' style='color:blue;border-style:dotted;' onclick='EnergiekonzeptFunction(\"heat\")' />", - "<area id='mapNatID' alt='' title='Nat' shape='rect' coords='0,449,375,474' style='color:blue;border-style:dotted;' onclick='EnergiekonzeptFunction(\"Nat\")' />", - "<area id='mapAuxGasBoilerID' alt='' title='AuxgasBoiler' shape='rect' coords='203,407,261,445' style='color:blue;border-style:dotted;' onclick='EnergiekonzeptFunction(\"Aux Gas Boiler\")' />", - "<area id='mapAuxHeaterID' alt='' title='AuxHeater' shape='rect' coords='293,254,353,291' style='color:blue;border-style:dotted;' onclick='EnergiekonzeptFunction(\"Aux Heater\")' />", + "<area id='mapElectricityID' alt='' title='electricity' shape='rect' coords='0,93,372,117' onclick='EnergiekonzeptFunction(\"Electricity\")' />", + "<area id='mapHeatID' alt='' title='heat' shape='rect' coords='0,202,375,227' onclick='EnergiekonzeptFunction(\"heat\")' />", + "<area id='mapNatID' alt='' title='Nat' shape='rect' coords='0,449,375,474' onclick='EnergiekonzeptFunction(\"Nat\")' />", + "<area id='mapAuxGasBoilerID' alt='' title='AuxgasBoiler' shape='rect' coords='203,407,261,445' onclick='EnergiekonzeptFunction(\"Aux Gas Boiler\")' />", + "<area id='mapAuxHeaterID' alt='' title='AuxHeater' shape='rect' coords='293,254,353,291' onclick='EnergiekonzeptFunction(\"Aux Heater\")' />", "<area id='mapHeatPumpID' alt='' title='HeatPump' shape='rect' coords='106,231,166,268' style='outline:none;' onclick='EnergiekonzeptFunction(\"Heat Pump\")' />", "<area id='mapTubID' alt='' title='tub' shape='rect' coords='208,331,268,373' style='outline:none;' onclick='EnergiekonzeptFunction(\"Tub\")' />", "<area id='mapTankID' alt='' title='Tank' shape='rect' coords='31,286,69,332' style='outline:none;' onclick='EnergiekonzeptFunction(\"Tank\")' />", @@ -887,19 +887,19 @@ },{ "name": "stockach", "cameraPosition": [ - 9.200739649848082, - 48.78628375787509, - 1135.1106292376635 + 9.19880981069925, + 48.78073258586779, + 557.8946752995696 ], "groundPosition": [ - 9.200516671379766, - 48.78950156895682, - -0.003564414081662304 + 9.20002319296369, + 48.78831698706695, + -0.004286617007779517 ], - "distance": 1190.3042008503244, - "heading": 357.3784311885765, - "pitch": -72.48572022202158, - "roll": 359.8755203745571, + "distance": 1015.2020567756226, + "heading": 6.034472681516794, + "pitch": -33.33958313017551, + "roll": 0.02406619855133695, "animate": false }, { diff --git a/vcm/index.html b/vcm/index.html index 817a360986ff2c4b46eb63985cd9bd07a5135135..5c0dadec6c5e0ca54a1dcc0ecb5e5736d3c16d26 100644 --- a/vcm/index.html +++ b/vcm/index.html @@ -140,79 +140,7 @@ margin: 20px 10px 0 0; display: inline-block; } -/* Css code for Dropdown Menu */ - /* The container <div> - needed to position the dropdown content */ - .dropdown { - position: relative; - display: inline-block; - } - - /* The dropdown container <div> - needed to hold the content inside dropdown */ - .dropdown-content { - right: -20px; - display: none; - position: absolute; - min-width: 150px; - box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); - z-index: 1; - } - - /* Accordion as a button to add expandible and collapsible menu items */ - .accordion { - border: solid white; - border-width: thin; - display: block; - background-color:dimgray; - color: white; - cursor: pointer; - padding: 11px; - width: 100%; - text-align: left; - outline: none; - font-size: 15px; - transition: 0.4s; - } - - /* Sub menu items inside the accordion */ - .sub-menu { - line-height: 35px; - padding: 0px 20px; - background-color: dimgray; - max-height: 0; - overflow: hidden; - transition: max-height 0.2s ease-out; - } - - /* Styling for text of submenu */ - .sub-menu a{ - text-decoration: none; - color: aliceblue; - cursor: pointer; - outline: none; - font-size: 15px; - } - - .active, .accordion:hover { - background-color: darkgray; - } - - /* Changing of + and - on menu expand and collapse respectively*/ - .accordion:after { - content: '\002B'; - color:black; - font-weight: bold; - float: right; - margin-left: 5px; - } - - .active:after { - content: "\2212"; - } - - /* Show the dropdown menu on hover */ - .dropdown:hover .dropdown-content { - display: block; - } + </style> <link rel='stylesheet' href='css/vcm_ui.css'> @@ -221,7 +149,9 @@ <!-- // added Story --> <link rel="stylesheet" href="templates/custom.css"> - <link rel="stylesheet" href="templates/story/story.css"> + <link rel="stylesheet" href="templates/story/story.css"> + <link rel="stylesheet" href="templates/cus_Menu.css"> + </head> <body> @@ -234,17 +164,21 @@ <div class="title-box vcm_copyright_headerTitle"></div> <!-- Drop down menu starts here --> <div class="dropdown hidden" style="float: right; right:20px"> - <i class="fa fa-bars" style="font-size:1.8rem;color: antiquewhite;"></i> + <i class="fa fa-bars" id="dropdownMenu" style="font-size:1.8rem;color: antiquewhite; margin-top:1rem;"></i> <div class="dropdown-content"> - <button class="accordion">Menu 1</button> + <button class="accordion">Partizipation</button> <div class="sub-menu"> - <a href="#">Sub Menu 1</a> + <a href="#" onclick="showtourSpecific('menu')">Böckingerstraße</a> </div> - <button class="accordion">Menu 2</button> + <button class="accordion">Energy</button> <div class="sub-menu"> - <a href="#">Sub Menu 2</a> + <a href="#" onclick="EnergiekonzeptFunction('nothing')">Stöckach</a> + </div> + <button class="accordion">Acoustics</button> + <div class="sub-menu"> + <a href="#">Sub Menu 3</a> </div> - <button class="accordion">Menu 3</button> + <button class="accordion">Mobility</button> <div class="sub-menu"> <a href="#">Sub Menu 3</a> </div> @@ -272,10 +206,10 @@ <!-- Content Tour --> <div id="tour-frame" style="display: none; overflow-y: scroll;"> <div class="tour-top-navi" style="z-index:99"> - <a href="#mystory" id = "testing" class="top-nav buttonset one"><i class="fa fa-globe"></i> Projekt 1</a> - <a href="#energiefahrrad" class="top-nav buttonset one"><i class="fa fa-bicycle"></i> Projekt 2</a> + <a href="#" onclick="goHome()" id = "testing" class="top-nav buttonset one"><i class="fa fa-home"></i>Home</a> + <!-- <a href="#energiefahrrad" class="top-nav buttonset one"><i class="fa fa-bicycle"></i> Projekt 2</a> <a href="#wea" class="top-nav buttonset one"><i class="fa fa-bolt"></i> Projekt 3</a> - <a href="#projects" id="back" class="top-nav buttonset one"><i class="fa fa-bolt"></i> Back to Projekt View 3</a> + <a href="#projects" id="back" class="top-nav buttonset one"><i class="fa fa-bolt"></i> Back to Projekt View 3</a> --> <!-- Buttonleiste oben <a href="#demo-viewpoint" class="top-nav buttonset one"><i class="fa fa-globe"></i> Viewpoint</a> <a href="#demo-hiding" class="top-nav buttonset one"><i class="fa fa-eye-slash"></i> Hiding</a> @@ -634,6 +568,8 @@ <script src="templates/custom.js"></script> + <script src="templates/cus_Menu.js"></script> + <script src="templates/cus_SimStadt.js"></script> <script src="templates/collapse.js"></script> <script src="templates/checkmobile.js"></script> @@ -642,22 +578,6 @@ integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <script src="templates/story/virtualcitystory.js"></script> - <!--Start: Javascript code to handle expand and collapse functionality of dropdown menu --> - <script> - var acc = document.getElementsByClassName("accordion"); - var i; - for (i = 0; i < acc.length; i++) { - acc[i].addEventListener("click", function() { - this.classList.toggle("active"); - var subMenu = this.nextElementSibling; - if (subMenu.style.maxHeight) { - subMenu.style.maxHeight = null; - } else { - subMenu.style.maxHeight = subMenu.scrollHeight + "px"; - } - }); - } - </script> - <!--End: Javascript code to handle expand and collapse functionality of dropdown menu --> + </body> </html> diff --git a/vcm/templates/cus_Menu.css b/vcm/templates/cus_Menu.css new file mode 100644 index 0000000000000000000000000000000000000000..01801ff27cebb42380cfdd11ae84faaee4be5784 --- /dev/null +++ b/vcm/templates/cus_Menu.css @@ -0,0 +1,76 @@ +/* Css code for Dropdown Menu */ + /* The container <div> - needed to position the dropdown content */ + .dropdown { + position: relative; + display: inline-block; + } + + /* The dropdown container <div> - needed to hold the content inside dropdown */ + .dropdown-content { + right: -20px; + display: none; + position: absolute; + min-width: 150px; + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); + z-index: 1; + } + + /* Accordion as a button to add expandible and collapsible menu items */ + .accordion { + border: solid white; + border-width: thin; + display: block; + background-color:#000000; + color: white; + cursor: pointer; + padding: 11px; + width: 100%; + text-align: left; + outline: none; + font-size: 15px; + transition: 0.4s; + } + + /* Sub menu items inside the accordion */ + .sub-menu { + line-height: 35px; + padding: 0px 20px; + background-color: dimgray; + max-height: 0; + overflow: hidden; + transition: max-height 0.2s ease-out; + } + + /* Styling for text of submenu */ + .sub-menu a{ + text-decoration: none; + color: aliceblue; + cursor: pointer; + outline: none; + font-size: 15px; + } + + .active, .accordion:hover { + background-color: darkgray; + } + + /* Changing of + and - on menu expand and collapse respectively*/ + .accordion:after { + content: '\002B'; + color:black; + font-weight: bold; + float: right; + margin-left: 5px; + } + + .active:after { + content: "\2212"; + } + + /* Show the dropdown menu on hover */ + .dropdown:hover .dropdown-content { + display: block; + } + #dropdownMenu{ + cursor: pointer; + } \ No newline at end of file diff --git a/vcm/templates/cus_Menu.js b/vcm/templates/cus_Menu.js new file mode 100644 index 0000000000000000000000000000000000000000..5876c65a38338b6dc63011822d9c5fb0abff8fe9 --- /dev/null +++ b/vcm/templates/cus_Menu.js @@ -0,0 +1,13 @@ +var acc = document.getElementsByClassName("accordion"); + var i; + for (i = 0; i < acc.length; i++) { + acc[i].addEventListener("click", function() { + this.classList.toggle("active"); + var subMenu = this.nextElementSibling; + if (subMenu.style.maxHeight) { + subMenu.style.maxHeight = null; + } else { + subMenu.style.maxHeight = subMenu.scrollHeight + "px"; + } + }); + } \ No newline at end of file diff --git a/vcm/templates/cus_SimStadt.js b/vcm/templates/cus_SimStadt.js new file mode 100644 index 0000000000000000000000000000000000000000..76049828a370b2e42346018feb51ba4337c79ae6 --- /dev/null +++ b/vcm/templates/cus_SimStadt.js @@ -0,0 +1,73 @@ +var internStuff = { + attic: true, + atticHeating: true, + basement: true, + basementHeating: true, + buildingType: "EFH", // other options: "RH", "MFH", "GFH", "HH" + flatRoof: true, + id: 'DEBW522AA000039fd', // equal with glmid + latitude: 51.44679140365339, // an example of a building in Essen + longitude: 6.967781962878631, // an example of a building in Essen + refurbishment: "statuQuo", // other options: "medium", "advanced" + simulationName: "MonthlyEnergyBalance", // just use this value for Heat/Cooling Demand + storeyCount: 3, + timestep: 1, // dummy integer, not yet integrated but mandatory + usageProfile: "Single Family House", // // other options: "Multi Family House" + yearOfConstruction: 1946 + } + + // var SimSInput = { + // gmlid: 'DENW22AL700004Lv', // an example of a building in Essen DENW22AL700004Lv + // cityID: 3, //, Essen 3 // Stockach 1 + // // ui: internStuff + + // }; + + var SimSOutput = "" + + //Test SimStadt API //DEBW522AA0001585e + var callSimS = function(){ + var framework = vcs.vcm.Framework.getInstance(); + var layers = framework.getLayers(); + var layerStock = layers[1]; + layerStock.highlight({"DEBW522AA0001585e":Cesium.Color.fromCssColorString("#BB8FCE")}) + + try { + + $.ajax({ + async: false, + type: "POST", + url: '/getSimS', + data: internStuff + }).done(function (SimSMid) { + convertdata(SimSMid); + }); + + function convertdata(SimSMids) { + SimSOutput = SimSMids; + } + + // console.log(currentwind); + return SimSOutput; + } + catch (err) { + console.log('-> function callSimS() failed!\n' + err); + } + } + + + function fixJson(JsonString) { + + var objOne = JsonString + JsonString = "{" + JsonString + "}" + JsonString = JsonString.replace(/DEN/g, ',"DEN') + JsonString = JsonString.replace(/ing/g, 'ing"') + JsonString = JsonString.replace("ly", 'ly"') + // JsonString = JsonString.replace(/]/g, '],') + JsonString = JsonString.replace(/=/g, ':') + JsonString = JsonString.replace(',"DEN', '"DEN') + + // JsonString = JsonString.replace("=", '":') + console.log(JsonString) + return(JsonString) + } \ No newline at end of file diff --git a/vcm/templates/custom.css b/vcm/templates/custom.css index 3a70ba1cbd82ebd78616ac621a42e11eda78a299..fb85a935eb77511675113c1ff2ec234193c70cc3 100644 --- a/vcm/templates/custom.css +++ b/vcm/templates/custom.css @@ -275,4 +275,8 @@ div.tour-top-navi { .balloon{ cursor: pointer; -} \ No newline at end of file +} + + + + diff --git a/vcm/templates/custom.js b/vcm/templates/custom.js index a78fe3983e07d252b5e7c821eb05a11cb00c07a8..617e5f95db1446eac3efd01cfc2ccb45acefc901 100644 --- a/vcm/templates/custom.js +++ b/vcm/templates/custom.js @@ -45,8 +45,10 @@ function stopStory() { // }; } -function showtourSpecific() { - +function showtourSpecific(specify) { + if (specify == 'menu'){ + vcs.vcm.Framework.getInstance().getActiveMap().gotoViewPoint(vcs.vcm.Framework.getInstance().viewpoints.Böckingerstraße) + } // var oldstuff = document.getElementById("old") // var para = document.createElement("P"); // para.innerHTML = "This is a paragraph."; @@ -89,13 +91,14 @@ function showSlides(n, no) { x[slideIndex[no]-1].style.display = "block"; } -var heating + + // ========================================================================= function EnergiekonzeptFunction(content){ vcs.vcm.Framework.getInstance().getActiveMap().gotoViewPoint(vcs.vcm.Framework.getInstance().viewpoints.stockach) - var layerNamesToDeactivate = ["ProjektOne"] - var layers = framework.getLayers(); + // var layerNamesToDeactivate = ["ProjektOne"] + // var layers = framework.getLayers(); document.getElementById("UmfrageOne").style.display = "none"; @@ -200,76 +203,13 @@ function Questionnaire() { } -var internStuff = { - attic: true, - atticHeating: true, - basement: true, - basementHeating: true, - buildingType: "EFH", // other options: "RH", "MFH", "GFH", "HH" - flatRoof: true, - id: 'DEBW522AA000039fd', // equal with glmid - latitude: 51.44679140365339, // an example of a building in Essen - longitude: 6.967781962878631, // an example of a building in Essen - refurbishment: "statuQuo", // other options: "medium", "advanced" - simulationName: "MonthlyEnergyBalance", // just use this value for Heat/Cooling Demand - storeyCount: 3, - timestep: 1, // dummy integer, not yet integrated but mandatory - usageProfile: "Single Family House", // // other options: "Multi Family House" - yearOfConstruction: 1946 -} - -// var SimSInput = { -// gmlid: 'DENW22AL700004Lv', // an example of a building in Essen DENW22AL700004Lv -// cityID: 3, //, Essen 3 // Stockach 1 -// // ui: internStuff - -// }; - -var SimSOutput = "" - -//Test SimStadt API //DEBW522AA0001585e -var callSimS = function(){ - var framework = vcs.vcm.Framework.getInstance(); - var layers = framework.getLayers(); - var layerStock = layers[1]; - layerStock.highlight({"DEBW522AA0001585e":Cesium.Color.fromCssColorString("#BB8FCE")}) - try { - $.ajax({ - async: false, - type: "POST", - url: '/getSimS', - data: internStuff - }).done(function (SimSMid) { - convertdata(SimSMid); - }); - - function convertdata(SimSMids) { - SimSOutput = SimSMids; - } - - // console.log(currentwind); - return SimSOutput; - } - catch (err) { - console.log('-> function callSimS() failed!\n' + err); - } +function goHome(){ + var viewp = vcs.vcm.Framework.getInstance().viewpoints.startview + $("#tour-button").hide(); + showMap() + + //stopStory() + vcs.vcm.Framework.getInstance().getActiveMap().gotoViewPoint(viewp) } - - -function fixJson(JsonString) { - -var objOne = JsonString - JsonString = "{" + JsonString + "}" - JsonString = JsonString.replace(/DEN/g, ',"DEN') - JsonString = JsonString.replace(/ing/g, 'ing"') - JsonString = JsonString.replace("ly", 'ly"') - // JsonString = JsonString.replace(/]/g, '],') - JsonString = JsonString.replace(/=/g, ':') - JsonString = JsonString.replace(',"DEN', '"DEN') - - // JsonString = JsonString.replace("=", '":') - console.log(JsonString) - return(JsonString) -} \ No newline at end of file diff --git a/vcm/templates/items.json b/vcm/templates/items.json index a2a0e31a147529612e4809a8aa8b421c95f5eeb3..bed7174dcd63cc14207e6b8175cd99fdfed09a7c 100644 --- a/vcm/templates/items.json +++ b/vcm/templates/items.json @@ -365,12 +365,6 @@ "clickInteraction": [ "rotateAroundFernsehturm" ] - }, - { - "htmlID": "#testing", - "clickInteraction": [ - "sOne", "STEST" - ] } ] }