Update UI

vcm/css/menu.css

@@ -151,4 +151,68 @@
   }
   .leftstuff{
       float:left !important
+  }
+
+/* Unser Logo */
+  .logo_kk{
+    height: 75px;
+    width: 75px;
+    /* float: left; */
+    z-index: 100;
+    background: white;
+    margin-top: 15px;
+    position: absolute;
+    /* padding: 25px; */
+    border-bottom-right-radius: 3px;
+    border-top-right-radius: 3px;
+    /* display: inline-block; */
+    transition: width 1s;
+    overflow:hidden;  
+    cursor: pointer
+  }
+  #logo_title{
+      display:none;
+      position:relative;
+  }
+  .logo_kk:hover{
+    width:250px;
+  }
+  .logo_kk:hover #logo_title{
+
+    display:block;
+    position: relative;
+    float: left;
+    font-size: 20px;
+    font-weight: 600;
+    font-family: 'Roboto',sans-serif;
+    height:75px;
+    margin: 0px;
+    padding: 26px 0;
+    /* -webkit-transition: all .8s ease;
+    -moz-transition: all .8s ease;
+    -ms-transition: all .8s ease;
+    -o-transition: all .8s ease; */
+    transition: width 2s;
+     /* padding: 2px; */
+  }
+  #logo_Main{
+    height: 75px;
+    width: 75px;
+    /* position: relative; */
+    padding: 15px;
+    float:left;
+  }
+
+  .logo-box{
+    display:none;
+  }
+  .company-logo{
+    display:none;
+  }
+  .title-box{
+    display:none;
+  }
+
+  .btn_size{
+    padding: 7px !important;
   }
\ No newline at end of file

vcm/css/vcm_info.css

 
+@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
 body {
-    font-family: Arial, sans-serif;
+    font-family: "Roboto", sans-serif;
     -webkit-font-smoothing: antialiased;
     text-rendering: optimizeLegibility;
     font-size: 1rem;

vcm/images/logo/Logo.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 57 57"><defs><style>.cls-1{fill:#ed1c24;}.cls-2{fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_13" data-name="Layer 13"><path d="M36.46,16.7a3.2,3.2,0,0,0-1,1.91,2.74,2.74,0,0,0,1.43,2.6c3.53,1.88,4.95,5.32,4.09,9.93-1.5,8-8.47,9.26-12.49,9.26-5.18,0-11.59-1.7-12.69-9.79a8.8,8.8,0,0,1,4.54-9.44,2.72,2.72,0,0,0,1.34-2.42,3.41,3.41,0,0,0-.77-2.05H36.46m-18.73-2a1.12,1.12,0,0,0-1,.6,1,1,0,0,0,.37,1.26c.4.25,2.6.84,2.64,2.27a.72.72,0,0,1-.35.64,10.8,10.8,0,0,0-5.51,11.43C15,39.18,21.28,42.4,28.52,42.4S41.59,39,43,31.5c1.54-8.33-3.77-11.33-5.12-12a.73.73,0,0,1-.37-.7c0-.69,2-1.89,2.75-2.27a1,1,0,0,0-.35-1.78H17.94a1,1,0,0,0-.21,0Z"/><path class="cls-1" d="M25.19,5.84,27.88.39a.69.69,0,0,1,1.24,0l2.69,5.45a.69.69,0,0,1-.62,1H25.81A.69.69,0,0,1,25.19,5.84Z"/><path d="M31.81,51.16l-2.69,5.45a.69.69,0,0,1-1.24,0l-2.69-5.45a.69.69,0,0,1,.62-1h5.38A.69.69,0,0,1,31.81,51.16Z"/><path d="M51.16,25.19l5.45,2.69a.69.69,0,0,1,0,1.24l-5.45,2.69a.69.69,0,0,1-1-.62V25.81A.69.69,0,0,1,51.16,25.19Z"/><path d="M5.84,31.81.39,29.12a.69.69,0,0,1,0-1.24l5.45-2.69a.69.69,0,0,1,1,.62v5.38A.69.69,0,0,1,5.84,31.81Z"/><path class="cls-2" d="M39.61,15.91a11,11,0,0,1-22,0"/></g></g></svg>
\ No newline at end of file

vcm/js/navigation.js

 function getStart(point){
-
+position_var = true
 pointsoe = point;
 
 

vcm/js/noise.js

@@ -15,9 +15,9 @@ var Sensor = {
   id:"49368"
   }
 function getNoiseData(sensorid) {
-  console.log("arrive")
+  // console.log("arrive")
     Sensor.id = sensorid
-    console.log(Sensor.id)
+    // console.log(Sensor.id)
     try {
         $.ajax({
             type: "GET",
@@ -28,7 +28,7 @@ function getNoiseData(sensorid) {
         });
         function convertdata(data) {
             flow = data;
-            console.log(flow)
+            // console.log(flow)
          
             for (var i = 0; i<= flow[0].sensordatavalues.length -1; i++){
                 if (flow[0].sensordatavalues[i].value_type == "noise_LAeq"){
@@ -49,7 +49,7 @@ function getNoiseData(sensorid) {
 
     }
     catch (err) {
-        console.log('loading Gas Values from DB failed!');
+        // console.log('loading Gas Values from DB failed!');
     }
 }
 
@@ -149,7 +149,7 @@ function noisemap(areatime){
     var layersSTU = frameworkSTU.getLayers();
     for (var i = 0; i< layersSTU.length; i++) {
       var layerst = layersSTU[i];
-      console.log(i)
+      // console.log(i)
       if (day == true){
         if(layernameStuttgartTotal.indexOf(layerst.name) >= 0) {
         layerIndexStuttgartTotal = i
@@ -168,7 +168,7 @@ function noisemap(areatime){
     var tilesetSTU = layerSTU.cesium3DTileset;
     
     var timeout = setInterval(function() {
-      console.log(layerSTU.active)
+      // console.log(layerSTU.active)
       if(layerSTU.active) {
         if (StreetD == true || StreetN == true){
           tilesetSTU.style = new Cesium.Cesium3DTileStyle({
@@ -271,7 +271,7 @@ function noisemap(areatime){
             },
           });
         }
-        console.log("")
+        // console.log("")
         
 
         clearInterval(timeout); 
@@ -352,9 +352,9 @@ function noisemap2(areatime){
   var tilesetSTU = layerSTU.cesium3DTileset;
   
   var timeout = setInterval(function() {
-    console.log(layerSTU.active)
+    // console.log(layerSTU.active)
     if(layerSTU.active) {
-      console.log("")
+      // console.log("")
       tilesetSTU.style = new Cesium.Cesium3DTileStyle({
         color: {
           conditions: [
@@ -437,7 +437,7 @@ function HistNoiseData(Sensor) {
 
         function convertdata(histwinddt) {
             histNoise = histwinddt;
-            console.log(histNoise[0]);
+            // console.log(histNoise[0]);
             showgraphNoise();
         }
 
@@ -460,7 +460,7 @@ function showgraphNoise(){
   var datas = []
   var datasMin = []
   var dataseq = []
-  console.log(histNoise.length)
+  // console.log(histNoise.length)
   var sDay = new Date('1995-12-17T03:24:00');
   
   for (i = 0; i < histNoise.length; i++) {
@@ -496,8 +496,8 @@ function showgraphNoise(){
     
 
   }
-  console.log(dataseq)
-  console.log("--------")
+  // console.log(dataseq)
+  // console.log("--------")
   console.log([{
     x: new Date('2018-02-12').getTime(),
     y: 76
@@ -600,14 +600,14 @@ document.getElementById("chartNoise").innerHTML = "";
 var chart = new ApexCharts(document.querySelector("#chartNoise"), options);
 // document.getElementById("infobtnNoise").classList.add('infobtn');
 // document.getElementById("infobtnNoise").classList.remove('loaderN');
-console.log("end")
+// console.log("end")
 chart.render();
 
 }
 
 function sameDay(d1, d2) {
-  console.log(d1.getFullYear() + " // " + d1.getMonth() + " // " + d1.getDate() + " // " + d1.getHours())
-  console.log(d2.getFullYear() + " // " + d2.getMonth() + " // " + d2.getDate() + " // " + d2.getHours())
+  // console.log(d1.getFullYear() + " // " + d1.getMonth() + " // " + d1.getDate() + " // " + d1.getHours())
+  // console.log(d2.getFullYear() + " // " + d2.getMonth() + " // " + d2.getDate() + " // " + d2.getHours())
   return d1.getFullYear() === d2.getFullYear() &&
     d1.getMonth() === d2.getMonth() &&
     d1.getDate() === d2.getDate() &&

vcm/templates/UserBalloon.js

@@ -11,13 +11,21 @@ var ballonContent = {
       loc:""
   }
 
-
+var position_var = false;
 // Get Position from clicking on the map
+function setpositionVAR(vari){
+  position_var = vari;
+  if(vari == false){
+    pointsoe = " "
+  }
+}
 function getPosition() {
   var map = vcs.vcm.Framework.getInstance().getActiveMap();
   var CViewer = map.getCesiumWidget()
   var CScene = map.getCesiumWidget()._scene
-    if (document.getElementById("Navigation").style.display == "block"){
+
+  
+    if (position_var == true){
     // Mouse over the globe to see the cartographic position
     handler = new Cesium.ScreenSpaceEventHandler(CScene.canvas);
     handler.setInputAction(function (movement) {

vcm/templates/cus_Menu.css

@@ -65,6 +65,7 @@
 
     .active:after {
         content: "\2212";
+        float:right;
     }
 
     /* Show the dropdown menu on hover */

vcm/templates/cus_Menu.js

@@ -3,9 +3,12 @@ var acc = document.getElementsByClassName("accordion");
             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;
+                    position_var = false;
+                    pointsoe = " "
                 } else {
                     subMenu.style.maxHeight = subMenu.scrollHeight + "px";
                 } 
@@ -16,13 +19,13 @@ function nordbahnview(){
   var viewp = vcs.vcm.Framework.getInstance().viewpoints.NordBView
   vcs.vcm.Framework.getInstance().getActiveMap().gotoViewPoint(viewp);
 
-  document.getElementById("UmfrageOne").style.display = "none";
-  document.getElementById("NordbahnhofInfo").style.display = "block";
-  document.getElementById("Navigation").style.display = "none";
-  document.getElementById("projektOne").style.display = "none";
-  document.getElementById("Energiekonzept").style.display = "none";
-  document.getElementById("IntroProj").style.display = "none";
-  document.getElementById("Expertenmodus").style.display = "block";
+  // document.getElementById("UmfrageOne").style.display = "none";
+  // document.getElementById("NordbahnhofInfo").style.display = "block";
+  // document.getElementById("Navigation").style.display = "none";
+  // document.getElementById("projektOne").style.display = "none";
+  // document.getElementById("Energiekonzept").style.display = "none";
+  // document.getElementById("IntroProj").style.display = "none";
+  // document.getElementById("Expertenmodus").style.display = "block";
   showgraph();
   
 }
@@ -31,12 +34,235 @@ var expstate = false;
 function onoff(){
 
   if(expstate == false){
-    var element = document.getElementById("menustuff");
-    element.classList.remove("hidden");
+    // var element = document.getElementById("menustuff");
+    // element.classList.remove("hidden");
     expstate = true;
   }else{
-    var element = document.getElementById("menustuff");
-    element.classList.add("hidden");
+    // var element = document.getElementById("menustuff");
+    // element.classList.add("hidden");
     expstate = false;
   }
-}
\ No newline at end of file
+}
+
+function addcont(content){
+    var bilderstuff =                     '<div class="slideshow-container">' +
+        '<div class="mySlides1 fade">'+
+        '<div class="numbertext">1 / 17</div>'+
+        '<img src="images/content/contentboeckingerstrasse/grafik_aufgabenstellung.jpg" style="width:100%">'+
+        '<div class="text">Grafik</div>'+
+        '</div>'+
+        '<div class="mySlides1 fade">'+
+        '<div class="numbertext">2 / 17</div>'+
+        '<img src="images/content/contentboeckingerstrasse/boeckinger_strasse.jpg" style="width:100%">'+
+        '<div class="text">Böckinger Straße</div>'+
+        '</div>'+
+        '<div class="mySlides1 fade">'+
+        '<div class="numbertext">3 / 17</div>'+
+        '<img src="images/content/contentboeckingerstrasse/holzwerkstatt_igh.jpg" style="width:100%">'+
+        '<div class="text">Holzwerkstatt</div>'+
+        '</div>'+
+        '<div class="mySlides1 fade">'+
+        '<div class="numbertext">4 / 17</div>'+
+        '<img src="images/content/contentboeckingerstrasse/infoabend_garten_igh.jpg" style="width:100%">'+
+        '<div class="text">Infoabend im Garten</div>'+
+        '</div>'+
+        '<div class="mySlides1 fade">'+
+        '<div class="numbertext">5 / 17</div>'+
+        '<img src="images/content/contentboeckingerstrasse/interviews_nachbarschaft.jpg" style="width:100%">'+
+        '<div class="text">Interviews in der Nachbarschaft</div>'+
+        '</div>'+
+        '<div class="mySlides1 fade">'+
+        '<div class="numbertext">6 / 17</div>'+
+        '<img src="images/content/contentboeckingerstrasse/offene_bauwerkstatt_1.jpg" style="width:100%">'+
+        '<div class="text">Offene Bauwerkstatt</div>'+
+        '</div>'+
+        '<div class="mySlides1 fade">'+
+        '<div class="numbertext">7 / 17</div>'+
+        '<img src="images/content/contentboeckingerstrasse/offene_bauwerkstatt_2.jpg" style="width:100%">'+
+        '<div class="text">Offene Bauwerkstatt</div>'+
+        '</div>'+
+        '<div class="mySlides1 fade">'+
+        '<div class="numbertext">8 / 17</div>'+
+        '<img src="images/content/contentboeckingerstrasse/offene_bauwerkstatt_3.jpg" style="width:100%">'+
+        '<div class="text">Offene Bauwerkstatt</div>'+
+        '</div>'+
+        '<div class="mySlides1 fade">'+
+        '<div class="numbertext">9 / 17</div>'+
+        '<img src="images/content/contentboeckingerstrasse/planungsgebiet_choreographie.jpg" style="width:100%">'+
+        '<div class="text">Planungsgebiet Choreographie</div>'+
+        '</div>'+
+        '<div class="mySlides1 fade">'+
+        '<div class="numbertext">10 / 17</div>'+
+        '<img src="images/content/contentboeckingerstrasse/planungsgebiet_vogelperspektive.jpg" style="width:100%">'+
+        '<div class="text">Planungsgebiet Vogelperspektive</div>'+
+        '</div>'+
+        '<div class="mySlides1 fade">'+
+        '<div class="numbertext">11 / 17</div>'+
+        '<img src="images/content/contentboeckingerstrasse/station1_spielekiosk.jpg" style="width:100%">'+
+        '<div class="text">Spielekiosk</div>'+
+        '</div>'+
+        '<div class="mySlides1 fade">'+
+        '<div class="numbertext">12 / 17</div>'+
+        '<img src="images/content/contentboeckingerstrasse/station2_gartenkiosk.jpg" style="width:100%">'+
+        '<div class="text">Gartenkiosk</div>'+
+        '</div>'+
+        '<div class="mySlides1 fade">'+
+        '<div class="numbertext">13 / 17</div>'+
+        '<img src="images/content/contentboeckingerstrasse/station3_outdoorkiosk.jpg" style="width:100%">'+
+        '<div class="text">Outdoorkiosk</div>'+
+        '</div>'+
+        '<div class="mySlides1 fade">'+
+        '<div class="numbertext">14 / 17</div>'+
+        '<img src="images/content/contentboeckingerstrasse/station3_outdoorkiosk1.jpg" style="width:100%">'+
+        '<div class="text">Outdoorkiosk</div>'+
+        '</div>'+
+        '<div class="mySlides1 fade">'+
+        '<div class="numbertext">15 / 17</div>'+
+        '<img src="images/content/contentboeckingerstrasse/station4_infokiosk.jpg" style="width:100%">'+
+        '<div class="text">Infokiosk</div>'+
+        '</div>'+
+        '<div class="mySlides1 fade">'+
+        '<div class="numbertext">16 / 17</div>'+
+        '<img src="images/content/contentboeckingerstrasse/workshop_cafe_tas_1.jpg" style="width:100%">'+
+        '<div class="text">Workshop Cafe Tas</div>'+
+        '</div>'+
+        '<div class="mySlides1 fade">'+
+        '<div class="numbertext">17 / 17</div>'+
+        '<img src="images/content/contentboeckingerstrasse/workshop_cafe_tas_2.jpg" style="width:100%">'+
+        '<div class="text">Workshop Cafe Tas</div>'+
+        '</div>'+
+        '<!-- Next and previous buttons -->'+
+        '<a class="prev" onclick="plusSlides(-1, 0)">&#10094;</a>'+
+        '<a class="next" onclick="plusSlides(1, 0)">&#10095;</a>'+
+        '</div>'+
+        '<br>'+
+    '<!-- The dots/circles -->'+
+    '<div style="text-align:center">'+
+        '<span class="dot" onclick="currentSlide(1)"></span>'+
+        '<span class="dot" onclick="currentSlide(2)"></span>'+
+        '<span class="dot" onclick="currentSlide(3)"></span>'+
+        '<span class="dot" onclick="currentSlide(4)"></span>'+
+        '<span class="dot" onclick="currentSlide(5)"></span>'+
+        '<span class="dot" onclick="currentSlide(6)"></span>'+
+        '<span class="dot" onclick="currentSlide(7)"></span>'+
+        '<span class="dot" onclick="currentSlide(8)"></span>'+
+        '<span class="dot" onclick="currentSlide(9)"></span>'+
+        '<span class="dot" onclick="currentSlide(10)"></span>'+
+        '<span class="dot" onclick="currentSlide(11)"></span>'+
+        '<span class="dot" onclick="currentSlide(12)"></span>'+
+        '<span class="dot" onclick="currentSlide(13)"></span>'+
+        '<span class="dot" onclick="currentSlide(14)"></span>'+
+        '<span class="dot" onclick="currentSlide(15)"></span>'+
+        '<span class="dot" onclick="currentSlide(16)"></span>'+
+        '<span class="dot" onclick="currentSlide(17)"></span>'+
+    '</div>'
+
+    var heatdem = '<div style="width:100%;margin-top:200px;" id="chartNordB"></div>'
+
+    var nordbstuff =            "<h3 style='color: #000000;'>Nordbahnhof Planungskonzept</h3>" +
+    "<div class='box-3'>"+
+        "<div class='btn btn-three' onclick='newPlan()'>"+
+        "<span>Neue Planung</span>"+
+        "</div><br>"+
+        "<div class='btn btn-three' onclick='oldZust()'>"+
+        "<span>Ist Zustand</span>"+
+        "</div><br></div>"+
+        "<div class='box-3'>"+
+        "<p>Highlight &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </p><div class='switch'>"+
+        "<input type='checkbox' name='toggle' id='chxboxHighlight' onclick='checkboxHighlight(true);'>"+
+        "<label for='toggle'><i></i></label>"+
+        "</div>"+
+        "</div>"+
+        "<div class='box-3'>"+
+        "<p>EnergyDemand</p><div class='switch'>"+
+        "<input type='checkbox' name='toggle' id='chxboxDemand' onclick='checkboxDemand(true);'>"+
+        "<label for='toggle'><i></i></label>"+
+        "<span></span>"+
+    "</div>"+
+        "</div>"
+
+        heatdemVal01 = 100
+        heatdemVal02 = 200
+        heatdemVal03 = 300
+        heatdemVal04 = 400
+
+
+
+  if (content == "main_bock"){
+    var bilder = document.getElementById('bilder_bock') 
+    var other = document.getElementById('bilder_bock2')
+    other.innerHTML = ""
+    bilder.innerHTML = ""
+    bilder.innerHTML = bilderstuff
+    showSlides(1, 0);
+    showSlides(1, 1);
+  } else if (content == "main_bock2"){
+    var bilder = document.getElementById('bilder_bock2') 
+    var other = document.getElementById('bilder_bock')
+    other.innerHTML = ""
+    bilder.innerHTML = ""
+    bilder.innerHTML = bilderstuff
+    showSlides(1, 0);
+    showSlides(1, 1);
+  } else if (content == "main_heatdem"){
+    var heatdemand = document.getElementById('main_heatdem') 
+    var other = document.getElementById('main_heatdem2')
+    other.innerHTML = ""
+    heatdemand.innerHTML = ""
+    heatdemand.innerHTML = heatdem
+
+  } else if (content == "main_heatdem2"){
+    var heatdemand = document.getElementById('main_heatdem2') 
+    var other = document.getElementById('main_heatdem')
+    other.innerHTML = ""
+    heatdemand.innerHTML = ""
+    heatdemand.innerHTML = heatdem
+
+  } else if (content == "main_nordbstuff"){
+    var nordb = document.getElementById('nordbplanung') 
+    var other = document.getElementById('nordbplanung2')
+    other.innerHTML = ""
+    nordb.innerHTML = ""
+    nordb.innerHTML = nordbstuff
+  } else if (content == "main_nordbstuff2"){
+    var nordb = document.getElementById('nordbplanung2') 
+    var other = document.getElementById('nordbplanung')
+    other.innerHTML = ""
+    nordb.innerHTML = ""
+    nordb.innerHTML = nordbstuff
+  }
+
+ 
+    
+
+    
+
+
+
+// Thumbnail image controls
+// function currentSlide(n) {
+//   showSlides(slideIndex = n);
+// }
+
+
+};
+
+var slideIndex = [1,1];
+
+var slideId = ["mySlides1", "mySlides2"]
+// Next/previous controls
+  function plusSlides(n, no) {
+      showSlides(slideIndex[no] += n, no);
+  }  
+  
+  
+  function showSlides(n, no) {
+    var i;
+    var x = document.getElementsByClassName(slideId[no]);
+    if (n > x.length) {slideIndex[no] = 1}
+    if (n < 1) {slideIndex[no] = x.length}
+    for (i = 0; i < x.length; i++) {
+      x[i].style.display = "none";
+    }
+    x[slideIndex[no]-1].style.display = "block";
+  }
\ No newline at end of file

vcm/templates/custom.css

@@ -52,13 +52,18 @@
   height: 40px; 
 }
 
+/* Hier den header ausmachen */
+/* ---------------------------------------------------------------------------------------------- */
 /* Change these values to change the height of the header (they should all have the same value) */
 .vcm-header-height {
-   height: 3.5rem;
+   /* height: 3.5rem; */
   line-height: 2.5rem; /**/
 }
 .vcm-map-top {
-   top: 3.5rem; /**/
+    top: 0rem;  
+}
+#story-frame{
+  top:0em;
 }
 
 /* Change these values to change the height of the logobox in the lower left Company-box height should be 1rem less */
@@ -88,7 +93,7 @@
 
 
 
-
+@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
 /* ====================================================================================== */
 
 * {box-sizing:border-box}
@@ -188,31 +193,35 @@
 
 
 #headOne{
+  font-family: "Roboto", Arial !important;
+  font-weight: 700 !important;
   font-size: x-large;
 }
-
+.headOne{
+  font-family: "Roboto", Arial !important;
+  font-weight: 700 !important;
+  font-size: x-large;
+}
+h1{
+  font-family: "Roboto", Arial !important;
+  font-weight: 700 !important;
+}
+h2{
+  font-family: "Roboto", Arial !important;
+  font-weight: 500 !important;
+}
+h3{
+  font-family: "Roboto", Arial !important;
+  font-weight: 500 !important;
+}
 .SideInfo{
   margin:1em;
 }
 
-/* #projektOne{
-  margin:10px;
-  /* margin-right:30px; */
-  /* width: 100%;
-  height: 100%; */
-
-/* } */
-/* #UmfrageOne{
-  margin:10px; */
-  /* margin-right:30px; */
-  /* width: 100%;
-  height: 100%; */
-
-/* } */ 
 
 .contentOne{
-  font-family: "Cambria", Georgia, serif;
-  font-weight: bold;
+  font-family: "Roboto", Arial;
+  font-weight: 400;
   line-height: 1.6;
 }
 
@@ -298,6 +307,8 @@ div.tour-top-navi {
 	text-align: center;
 	width: 200px;
 	cursor: pointer;
+  font-family: "Roboto", sans-serif;
+  font-size: 400;
 }
 
 

vcm/templates/custom.js

@@ -58,12 +58,51 @@ function showtourSpecific(specify) {
     if (specify == 'menu'){
       vcs.vcm.Framework.getInstance().getActiveMap().gotoViewPoint(vcs.vcm.Framework.getInstance().viewpoints.Böckingerstraße)
       document.getElementById("Expertenmodus").style.display = "block";
+      document.getElementById("projektOne").style.display = "none";
     } else if (specify == 'main'){
       vcs.vcm.Framework.getInstance().getActiveMap().gotoViewPoint(vcs.vcm.Framework.getInstance().viewpoints.Böckingerstraße)
       document.getElementById("Expertenmodus").style.display = "none";
+      document.getElementById("projektOne").style.display = "block";
       var element = document.getElementById("icon_lock");
       element.classList.add("fa-lock");
       element.classList.remove("fa-unlock");
+      var layer01 = ["LocationFour"]
+      var layer02 = ["LocationThree"]
+      var layer03 = ["LocationTwo"]
+      var layer04 = ["LocationOne"]
+      var layer05 = ["Questionnaire"]
+  
+  
+      var framework = vcs.vcm.Framework.getInstance();
+      var layers = framework.getLayers();
+    
+      for (var i = 0; i< layers.length; i++) {
+        var layer = layers[i];
+        if(layer01.indexOf(layer.name) >= 0){
+          layer.activate(true);
+        } else if (layer02.indexOf(layer.name) >= 0){
+          layer.activate(true);
+        } else if (layer03.indexOf(layer.name) >= 0){
+          layer.activate(true);
+        } else if (layer04.indexOf(layer.name) >= 0){
+          layer.activate(true);
+        } else if (layer05.indexOf(layer.name) >= 0){
+          layer.activate(true);
+        } else if (layerfix.indexOf(layer.name) >= 0){
+          layer.activate(true);
+        } else if (layerfix01.indexOf(layer.name) >= 0){
+          layer.activate(true);
+        } else if (layerfix02.indexOf(layer.name) >= 0){
+          layer.activate(true);
+        } else if (layerfix03.indexOf(layer.name) >= 0){
+          layer.activate(true);
+        } else if (layerfix04.indexOf(layer.name) >= 0){
+          layer.activate(true);
+        } else {
+          layer.activate(false);
+        }
+      }
+      unhighlightStuff();
     }
     // var oldstuff = document.getElementById("old")
     // var para = document.createElement("P");
@@ -73,49 +112,14 @@ function showtourSpecific(specify) {
     document.getElementById("NordbahnhofInfo").style.display = "none";
     document.getElementById("Energiekonzept").style.display = "none";
     document.getElementById("Navigation").style.display = "none";
-    document.getElementById("projektOne").style.display = "block";
+    
     document.getElementById("IntroProj").style.display = "none";
     
     showTour();
 
 
-    var layer01 = ["LocationFour"]
-    var layer02 = ["LocationThree"]
-    var layer03 = ["LocationTwo"]
-    var layer04 = ["LocationOne"]
-    var layer05 = ["Questionnaire"]
-
 
-    var framework = vcs.vcm.Framework.getInstance();
-    var layers = framework.getLayers();
-  
-    for (var i = 0; i< layers.length; i++) {
-      var layer = layers[i];
-      if(layer01.indexOf(layer.name) >= 0){
-        layer.activate(true);
-      } else if (layer02.indexOf(layer.name) >= 0){
-        layer.activate(true);
-      } else if (layer03.indexOf(layer.name) >= 0){
-        layer.activate(true);
-      } else if (layer04.indexOf(layer.name) >= 0){
-        layer.activate(true);
-      } else if (layer05.indexOf(layer.name) >= 0){
-        layer.activate(true);
-      } else if (layerfix.indexOf(layer.name) >= 0){
-        layer.activate(true);
-      } else if (layerfix01.indexOf(layer.name) >= 0){
-        layer.activate(true);
-      } else if (layerfix02.indexOf(layer.name) >= 0){
-        layer.activate(true);
-      } else if (layerfix03.indexOf(layer.name) >= 0){
-        layer.activate(true);
-      } else if (layerfix04.indexOf(layer.name) >= 0){
-        layer.activate(true);
-      } else {
-        layer.activate(false);
-      }
-    }
-    unhighlightStuff();
+    
     noisemap('offS')
     // expstate = true;
     onoff()
@@ -127,34 +131,10 @@ function showtourSpecific(specify) {
 
 // ======================================================================================
 
-var slideIndex = [1,1];
 
-var slideId = ["mySlides1", "mySlides2"]
-showSlides(1, 0);
-showSlides(1, 1);
 
-// Next/previous controls
-function plusSlides(n, no) {
-  showSlides(slideIndex[no] += n, no);
-}
-
-// Thumbnail image controls
-// function currentSlide(n) {
-//   showSlides(slideIndex = n);
-// }
 
 
-function showSlides(n, no) {
-  var i;
-  var x = document.getElementsByClassName(slideId[no]);
-  if (n > x.length) {slideIndex[no] = 1}
-  if (n < 1) {slideIndex[no] = x.length}
-  for (i = 0; i < x.length; i++) {
-     x[i].style.display = "none";
-  }
-  x[slideIndex[no]-1].style.display = "block";
-}
-
 
 
 // =========================================================================
@@ -165,13 +145,13 @@ function EnergiekonzeptFunction(content){
     // var layers = framework.getLayers();
 
 
-    document.getElementById("UmfrageOne").style.display = "none";
-    document.getElementById("NordbahnhofInfo").style.display = "none";
-    document.getElementById("Navigation").style.display = "none";
-    document.getElementById("projektOne").style.display = "none";
-    document.getElementById("Energiekonzept").style.display = "block";
-    document.getElementById("IntroProj").style.display = "none";
-    document.getElementById("Expertenmodus").style.display = "block";
+    // document.getElementById("UmfrageOne").style.display = "none";
+    // document.getElementById("NordbahnhofInfo").style.display = "none";
+    // document.getElementById("Navigation").style.display = "none";
+    // document.getElementById("projektOne").style.display = "none";
+    // document.getElementById("Energiekonzept").style.display = "block";
+    // document.getElementById("IntroProj").style.display = "none";
+    // document.getElementById("Expertenmodus").style.display = "block";
     showTour();
 
     if (content =="main"){
@@ -423,13 +403,14 @@ function NordbahnhofText() {
 
 
 function NoiseText() {
-  document.getElementById("projektOne").style.display = "none";
-  document.getElementById("Energiekonzept").style.display = "none"; 
-  document.getElementById("UmfrageOne").style.display = "none";
-  document.getElementById("Navigation").style.display = "none";
-  document.getElementById("NordbahnhofInfo").style.display = "none";
-  document.getElementById("NoiseInfo").style.display = "block";
-  document.getElementById("IntroProj").style.display = "none";
+  // document.getElementById("projektOne").style.display = "none";
+  // document.getElementById("Energiekonzept").style.display = "none"; 
+  // document.getElementById("UmfrageOne").style.display = "none";
+  // document.getElementById("Navigation").style.display = "none";
+  // document.getElementById("NordbahnhofInfo").style.display = "none";
+  // document.getElementById("NoiseInfo").style.display = "block";
+  // document.getElementById("IntroProj").style.display = "none";
+  // document.getElementById("Expertenmodus").style.display = "none";
   showTour();
 
   var viewp = vcs.vcm.Framework.getInstance().viewpoints.NoiseView

vcm/templates/slider.js

@@ -6,6 +6,7 @@ var value03html = document.getElementById('Three')
 var value04html = document.getElementById('Four')
 var value05html = document.getElementById('Five')
 
+
 noUiSlider.create(unconstrainedSlider, {
     start: [100, 200, 300, 400],
     // behaviour: 'unconstrained-tap',
@@ -48,34 +49,54 @@ unconstrainedSlider.noUiSlider.on('update', function (values) {
 }}
 });
 
-// var testingslider = document.getElementById('slider-color');
-
-// noUiSlider.create(testingslider, {
-//     start: slidervalues = [60, 100, 200, 300],
-//     connect: [true, true, true, true, true],
-//     range: {
-//         'min': [0],
-//         'max': [600]
-//     }
-// });
-
-// var connect = testingslider.querySelectorAll('.noUi-connect');
-// var classes = ['c-1-color', 'c-2-color', 'c-3-color', 'c-4-color', 'c-5-color'];
-
-// for (var i = 0; i < connect.length; i++) {
-//     connect[i].classList.add(classes[i]);
-// }
-
-
-// function checkSlider(){
-
-// }
-// // Display the slider value and how far the handle moved
-// // from the left edge of the slider.
-// range.noUiSlider.on('update', function (values) {
-//     // valuesDivs[handle].innerHTML = values[handle];
-//     // diffDivs[0].innerHTML = values[1] - values[0];
-//     // diffDivs[1].innerHTML = values[2] - values[1];
-//     // diffDivs[2].innerHTML = values[3] - values[2];
-//     alert(values[0])
-// });
\ No newline at end of file
+
+var unconstrainedSlider2 = document.getElementById('unconstrained2');
+var unconstrainedValues2 = document.getElementById('unconstrained-values2');
+var value01html2 = document.getElementById('One2')
+var value02html2 = document.getElementById('Two2')
+var value03html2 = document.getElementById('Three2')
+var value04html2 = document.getElementById('Four2')
+var value05html2 = document.getElementById('Five2')
+
+
+noUiSlider.create(unconstrainedSlider2, {
+    start: [100, 200, 300, 400],
+    // behaviour: 'unconstrained-tap',
+    connect: [true, true, true, true, true],
+    range: {
+        'min': 0,
+        'max': 500
+    }
+});
+
+var connect2 = unconstrainedSlider2.querySelectorAll('.noUi-connect');
+var classes2 = ['c-1-color', 'c-2-color', 'c-3-color', 'c-4-color', 'c-5-color'];
+
+for (var i = 0; i < connect.length; i++) {
+     connect2[i].classList.add(classes2[i]);
+}
+
+
+unconstrainedSlider2.noUiSlider.on('update', function (values) {
+    // unconstrainedValues.innerHTML = values.join(' :: ');
+    value01html2.innerHTML = "min - " + values[0];
+    value02html2.innerHTML = values[0] + " - " + values[1];
+    value03html2.innerHTML = values[1] + " - " + values[2];
+    value04html2.innerHTML = values[2] + " - " + values[3];
+    value05html2.innerHTML = values[3] + " - max";
+
+    var chk_ceil2= document.getElementById("chxboxDemand");
+    if (typeof chk_ceil2 === 'undefined'|| chk_ceil2 === null) {
+        // the variable is defined
+}else{
+    if(chk_ceil2.checked == true){
+
+        heatdemVal01 = values[0];
+        heatdemVal02 = values[1];
+        heatdemVal03 = values[2];
+        heatdemVal04 = values[3];
+
+ 
+      highlightEnergy();
+}}
+});
\ No newline at end of file

vcm/templates/sliders.css

@@ -11,19 +11,19 @@
     width: 100px;
  
   }
-#One{
+.One{
     background-color: #38943d;
 }
-#Two{
+.Two{
     background-color: #699438;
 }
-#Three{
+.Three{
     background-color: #d0d40b;
 }
-#Four{
+.Four{
     background-color: #db6f09;
 }
-#Five{
+.Five{
     background-color: #ad0202;
 }
 

vcm/templates/story/story.css

@@ -73,7 +73,7 @@ h2{
 header{
     position: fixed;
     z-index: 30;
-    width: 100%;
+    width: 0%;
 }
 
 
@@ -288,7 +288,7 @@ div.title-fill {
     position: absolute;
     left: -31px;
     background-color: #000000;
-    top: 10px;
+    top: 1em;
     padding:.45rem .55rem;
 }
 #tour-button > i:before{
@@ -310,11 +310,11 @@ div.title-fill {
 	}
 	#story-frame.tour {
 		left: 55%;
-		top: 5rem;
+		top: 0rem;
 	}
     #story-frame.tour-stop {
         left: 120%;
-        top: 5rem;
+        top: 0rem;
     }
     #render-story-off-btn.story-render-btn{
         right: 45%;
@@ -403,6 +403,12 @@ div.title-fill {
         display: block;
     }
 }
+@media screen and (max-width:92em /*1200px*/) {
+
+    .headOne{
+        margin-top: 1.4em;
+    }
+}
 
 .vcs_map_container.tour-inactive{
     right: 0px;