Add Buddis Content

vcm/config.json

@@ -312,16 +312,16 @@
         },
         {
           "template": [
-            "<div class='balloon' onclick='ProjectOneFunction()' id='myBalloonP1'>",
-            "   <h1 class='balloon-title'>Projekt One (Stöckach)</h1>",
-            "   <div class='balloon-content' style='height:280px; width:300px'",
+            "<div class='balloon' onclick='EnergiekonzeptFunction()' id='myBalloonP1'>",
+            "   <h1 class='balloon-title'>Energiekonzept (Stöckach)</h1>",
+            "   <div class='balloon-content' style='height:500px; width:300px'",
             "   </div>",
             "<p class='balloon-text'><span>Für mehr Infos klicken Sie bitte hier!</span><br></p>",
             "<img style='padding-top:10px' src='../../images/content/contentstoeckach/Stoeckach.jpg' alt='Simply Easy Learning' width='375'>",
 
             "</div>",
-            "<%  %>",
-            "<% openquestionaire() %>"
+            "<%  %>"
+
           ],
           "minTop": "balloonHeight + 10",
           "minLeft": "70",

vcm/css/collapse.css

+.collapsible {
+    background-color: #777;
+    color: white;
+    cursor: pointer;
+    padding: 18px;
+    width: 100%;
+    border: none;
+    text-align: left;
+    outline: none;
+    font-size: 15px;
+  }
+  
+  .active, .collapsible:hover {
+    background-color: #555;
+  }
+  
+  .content {
+    padding: 0 18px;
+    padding-bottom: 10px;
+    display: none;
+    overflow: hidden;
+    background-color: #f1f1f1;
+  }
\ No newline at end of file

vcm/index.html

@@ -144,6 +144,8 @@
 	
 	<link rel='stylesheet' href='css/vcm_ui.css'>
     <link rel='stylesheet' href='css/vcm.css'>
+    <link rel='stylesheet' href='css/collapse.css'>
+
 	<!-- // added Story -->	
 	<link rel="stylesheet" href="templates/custom.css">
 	<link rel="stylesheet" href="templates/story/story.css">
@@ -398,7 +400,39 @@
 
         </div>
             <!--=======================================================================================================-->
+            <!-- Project Stoeckach Energiekonzept -->
+        <div id="Energiekonzept" class="SideInfo" style="display:none;">
+
+            <h1 class="sticky" id="headOne">Introduction</h1>
+            
+            <p class="contentOne">In this study, we have evaluated multiple local energy system scenarios to find the optimal energy system design concepts for the” future” EnBW-Areal. In this study,
+                <br> •	we developed a 3D CityGML model for the EnBW-Areal and along with other calculation tools, estimated the electricity, heat, and hot water related energy demand profiles for the neighborhood.
+                <br> •	we evaluated multiple energy supply options that includes energy sources and conversion technologies to meet the estimated total energy demand.
+                <br> •	we evaluated the cost minimized technology mixes that achieves reduced CO2 emissions and compared the different energy system scenarios against a baseline energy system.
+                </p>
+
+            <button type="button" class="collapsible">Energy demand</button>
+            <div class="content">
+                <p>The annual electrical, heating, and hot water energy demand for the EnBW-Areal is estimated to be 2.88 GWh, 1.57 GWh, and 1.77 GWh, respectively. </p>
+            </div>
+            <button type="button" class="collapsible">Solar PV potential</button>
+            <div class="content">
+                <p>The study shows that the EnBW-Areal has a feasible potential to utilize approx. 30-35% of the roof area to generate local electricity from solar PV. As a result, the energy consumption related CO2 emissions can be reduced by about 30% compared to the base scenario evaluated in this study at a 8% less cost.  </p>
+            </div>
+            <button type="button" class="collapsible">Power-to-heat via heat pump</button>
+            <div class="content">
+                <p>High-efficient heat pumps can both reduce the CO2 emissions and the primary energy use.</p>
+            </div>
+            <button type="button" class="collapsible">Thermal storage </button>
+            <div class="content">
+                <p>Thermal storages improve the utilization of heat pump capacity. The flexibility of thermal storage units to meet the peak demand enable the heat pumps to be slightly undersized for the base-load operation.</p>
+            </div>
+            <button type="button" class="collapsible">Battery storage  </button>
+            <div class="content">
+                <p>The adoption of residential battery storages in Germany is driven by the self-consumption optimization objective. At lower PV levels, the generated PV electricity can be directly consumed, hence the benefits of battery systems are less. However, at higher PV penetration levels and when innovative market designs enable the participation of battery storage systems to provide other services to the electricity network, the value of battery storage systems can increase rapidly. </p>
+            </div>
             
+        </div>
 
       </div>
       <div id="tour-button" title="Karte/Story umschalten">
@@ -436,7 +470,10 @@
     </script-->
     <script src='lib/vcm_ui.js'></script>
 
+    
     <script src="templates/custom.js"></script>
+    
+    <script src="templates/collapse.js"></script>
     <script src="templates/checkmobile.js"></script>
 	
 	<script src="https://code.jquery.com/jquery-3.3.1.min.js"

vcm/templates/collapse.js

+var coll = document.getElementsByClassName("collapsible");
+var i;
+
+for (i = 0; i < coll.length; i++) {
+  coll[i].addEventListener("click", function() {
+    this.classList.toggle("active");
+    var content = this.nextElementSibling;
+    if (content.style.display === "block") {
+      content.style.display = "none";
+    } else {
+      content.style.display = "block";
+    }
+  });
+}
\ No newline at end of file

vcm/templates/custom.js

@@ -41,6 +41,7 @@ function showtourSpecific() {
     // para.innerHTML = "This is a paragraph.";
     // document.getElementById("old").innerHTML = para.innerHTML;
     document.getElementById("UmfrageOne").style.display = "none";
+    document.getElementById("Energiekonzept").style.display = "none";
     document.getElementById("projektOne").style.display = "block";
     showTour();
     
@@ -80,18 +81,27 @@ function showSlides(n) {
 
 var heating
 // =========================================================================
-function ProjectOneFunction(){
+function EnergiekonzeptFunction(){
     vcs.vcm.Framework.getInstance().getActiveMap().gotoViewPoint(vcs.vcm.Framework.getInstance().viewpoints.stockach)
 
     var layerNamesToDeactivate = ["ProjektOne"]
     var layers = framework.getLayers();
 
-    for (var i = 0; i< layers.length; i++) { 
-        var layer = layers[i];       
-        if(layerNamesToDeactivate.indexOf(layer.getName()) >= 0) { 
-          layer.activate(false); 
-        }
-      }
+
+    document.getElementById("UmfrageOne").style.display = "none";
+    document.getElementById("projektOne").style.display = "none";
+    document.getElementById("Energiekonzept").style.display = "block";
+    showTour();
+
+    // for (var i = 0; i< layers.length; i++) { 
+    //     var layer = layers[i];       
+    //     if(layerNamesToDeactivate.indexOf(layer.getName()) >= 0) { 
+    //       layer.activate(false); 
+    //     }
+    //   }
+
+
+
       var resultSimS = (callSimS());
       
       heating = JSON.parse(fixJson(resultSimS.return));
@@ -103,6 +113,7 @@ function ProjectOneFunction(){
 function Questionnaire() {
 
   document.getElementById("projektOne").style.display = "none";
+  document.getElementById("Energiekonzept").style.display = "none";
   document.getElementById("UmfrageOne").style.display = "block";
   showTour();