diff --git a/vcm/css/menu.css b/vcm/css/menu.css
index 70b4d63165524b15e27b94159f0ae11d06f4cc83..fe07a59c6ea75586d3e8a0f13281697f429a53f2 100644
--- a/vcm/css/menu.css
+++ b/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
diff --git a/vcm/css/vcm_info.css b/vcm/css/vcm_info.css
index adb939237f89362f94ddf807ab29babff4828d74..5845ef013514d44394a6844624629182437462ab 100644
--- a/vcm/css/vcm_info.css
+++ b/vcm/css/vcm_info.css
@@ -1,6 +1,7 @@
+@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;
diff --git a/vcm/images/logo/Logo.svg b/vcm/images/logo/Logo.svg
new file mode 100644
index 0000000000000000000000000000000000000000..90cd335762391f8ad30bc444f04f5d000d1b9cb9
--- /dev/null
+++ b/vcm/images/logo/Logo.svg
@@ -0,0 +1 @@
+<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
diff --git a/vcm/index.html b/vcm/index.html
index 3518d1564bd14249e89872f6ab33b129010783f5..3ef3f07f2081e04bc8e451b0cdf56d5a918c68a5 100644
--- a/vcm/index.html
+++ b/vcm/index.html
@@ -159,7 +159,7 @@
</head>
<body>
- <header class="tour-header vcm-header-height vcm-header-base vcm-border-splash">
+ <!-- <header class="tour-header vcm-header-height vcm-header-base vcm-border-splash">
<div id="header">
<div class="logo-box vcm_copyright_headerLogoBox">
<div class="company-logo"></div>
@@ -257,11 +257,11 @@
height: 40px;
width: 40px;
position: absolute;"></div>
- </div> -->
- <!-- Drop down menu ends here -->
+ </div>
+
<div class="tool-box" style="cursor:pointer"></div>
</div>
- </header>
+ </header> -->
<div id="story-frame" class="startscreen vcm-map-top loadingpointer">
<!-- Content Start Screen -->
<div class="balloon teaser-balloon" id="balloon-startscreen">
@@ -281,198 +281,352 @@
<!-- Content Tour -->
<div id="tour-frame" style="display: none; overflow-y: scroll;">
<div class="tour-top-navi" style="z-index:99">
- <a href="#" onclick="Introshow()" id = "btn_intro" class=" top-nav buttonset one btn_home"><i class="fa fa-home"></i></a>
- <a href="#" onclick="showtourSpecific('main')" id = "btn_bock" class=" top-nav buttonset one btn_home"><i class="fa fa-code-fork"></i> Böckingerstraße</a>
- <a href="#" onclick="NordbahnhofText()" id = "btn_nord" class=" top-nav buttonset one btn_home"><i class="fa fa-code-fork"></i> Nordbahnhof</a>
- <a href="#" onclick="NoiseText()" id = "btn_acous" class=" top-nav buttonset one btn_home"><i class="fa fa-code-fork"></i> Akkustik Projekt</a>
- <a href="#" onclick="Expert()" id = "btn_expert" class=" top-nav buttonset one btn_home"><i id="icon_lock" class="fa fa-lock"></i> Experten Modus</a>
- <!-- style="float:right;margin-right:2em;" -->
-
-
-
- <!-- <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> -->
- <!-- 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>
- <a href="#demo-highlight" class="top-nav buttonset one"><i class="fa fa-building"></i> Higlighting</a>
- <a href="#demo-planning" class="top-nav buttonset one"><i class="fa fa-building"></i> Planning</a>
- <a href="#demo-layer" class="top-nav buttonset one"><i class="fa fa-exchange"></i> Layer Switch</a>
- <a href="#demo-labels" class="top-nav buttonset one"><i class="fa fa-tag"></i> Labels</a>
- <a href="#demo-poi" class="top-nav buttonset one"><i class="fa fa-map-marker"></i> POI</a>
- <a href="#demo-rotate" class="top-nav buttonset one"><i class="fa fa-repeat"></i> Rotate</a>
- <a href="#story_start" class="top-nav buttonset one"><i class="fa fa-arrow-up"></i></a>
- -->
+ <a href="#" onclick="Introshow();setpositionVAR(false);" id = "btn_intro" class=" top-nav buttonset one btn_home btn_size"><i class="fa fa-home"></i></a>
+ <a href="#" onclick="addcont('main_bock2');showtourSpecific('main');setpositionVAR(false);" id = "btn_bock" class=" top-nav buttonset one btn_home btn_size"><i class="fa fa-code-fork"></i> Böckingerstraße</a>
+ <a href="#" onclick="addcont('main_heatdem2');addcont('main_nordbstuff2');NordbahnhofText();setpositionVAR(false);" id = "btn_nord" class=" top-nav buttonset one btn_home btn_size"><i class="fa fa-code-fork"></i> Nordbahnhof</a>
+ <a href="#" onclick="NoiseText();setpositionVAR(false);" id = "btn_acous" class=" top-nav buttonset one btn_home btn_size"><i class="fa fa-code-fork"></i> Akkustik Projekt</a>
+ <a href="#" onclick="addcont('main_bock');addcont('main_heatdem');addcont('main_nordbstuff');Expert();setpositionVAR(false);" id = "btn_expert" class=" top-nav buttonset one btn_home btn_size"><i id="icon_lock" class="fa fa-lock"></i> Experten Modus</a>
+ <!-- style="float:right;margin-right:2em;" -->
</div>
<!-- Expertenmodus-.--------------------------
======================================================================================================= -->
<div id="Expertenmodus" class="SideInfo" style="display:none;">
- <h1 class="sticky" id="headOne">Expertenmodus der Plattform</h1>
- <div class="dropdown" style="float: right; right:20px">
-
- <i class="fa fa-bars" id="dropdownMenu" onclick="onoff()" style="font-size:1.8rem;color: black !important; margin-top:1rem;"></i>
+ <h1 class="headOne" id="headOne">Expertenmodus der Plattform</h1>
+ <button id="men_partizipation" onclick="addcont('main_bock');setpositionVAR(false);showtourSpecific('menu');" type="button" class="collapsible">Partizipation</button>
+ <div class="content">
+ <div class="SideInfo">
+
+ <h1 id="headOne">Böckinger Straße</h1>
+ <!-- class="sticky" -->
+ <p class="contentOne">Die Reduzierung des privaten Wohnraums bedingt auch das Zusammenleben
+ im Quartier. Wohnfunktionen werden wieder in den öffentlichen Raum
+ und die Gemeinschaft verlagert und im Sinne von urbanen Gemeingütern
+ genutzt. Die Funktionsweise solcher Gemeingüter beruht dabei hauptsächlich
+ auf drei Grundelementen: der Ressource, einer Gruppe, die die Ressource
+ gemeinsam nutzt und den Regeln, die diese Gruppe zur Nutzung
+ festlegt. Aber wie kann man solche Gemeingüter in einem sich neu
+ entwickelnden Quartier implementieren?</p>
+ <p class="contentOne">In einem Realexperiment werden Konzepte und Ideen in Verknüpfung mit
+ lokalen Akteuren erarbeitet und ausprobiert. <br>
+ Der Garten des Imanuel Grözinger Hauses dient dabei als Ausgangspunkt. Drei Teams - Kommunikation,
+ Programm und Bau - führen Interviews, erarbeiten ein Programm
+ und eine bauliche Intervention vor Ort. Den Abschluss bildet ein Aktionstag
+ gemeinsam mit Bewohnern und Nachbarn.</p><br>
+ <p class="contentOne">Folgen Sie uns auf Instagram! Fotos und Videos führen Sie durch unsere
+ gesamte Woche in der Böckinger Straße.</p><br>
+ <p>@les_stuttgart</p>
+ <p>#ibasummerschool2019 #howtocommons #experiment</p>
+ <div id="bilder_bock">
+ <!-- Slideshow container -->
+
+ </div>
+
+ <p class="contentOne"><Strong>TEAM KOMMUNIKATION</Strong> arbeitet direkt mit den Anwohnern zusammen.
+ Wer sind relevante Akteure? Welches Potential bringen neue Akteure mit?
+ Welche Art der Kommunikation braucht es? In Interviews werden Bedürfnisse
+ und Wünsche für das zukünftige Quartier abgefragt und gemeinsam
+ eine Kommunikationsstrategie erarbeitet.<br>
+ <strong>TEAM PROGRAMM</strong> beschäftigt sich damit, wie man die gegenwärtigen und
+ zukünftigen Bewohner*innen des Quartiers aktivieren kann, Gemeingüter
+ zu entwickeln und zu nutzen. Welche Aktivitäten gibt es bereits vor Ort?
+ Wo finden sie statt? Und durch welches Programm kann man Akteure
+ zusammen bringen?<br>
+ <strong>TEAM BAU</strong> gestaltet eine bauliche Intervention, die von den Nachbarn
+ gemeinschaftlich im Sinne eines Urban Common genutzt werden kann.
+ Was fehlt noch? Welche bauliche Intervention kann die Bildung von urban
+ commons unterstützen? Und was bleibt am Ende zurück?</p>
+
+ <button id="btn_umfrage_bock2" class="accordion">Umfrage</button>
+ <div class="sub-menu" style="background-color:white;">
+ <a href="#" onclick="" >Umfrage:</a><br>
+ <iframe style="width: 95%; height:35em;margin-left:1em;margin-right:1em;border: none;" src="https://umfrage.smartvillages.online/limesurvey/index.php/351963?lang=de-informal"></iframe>
- <div id = "loadermain" class="loader" style="margin-right: 40px; margin-top: 40px; margin-left: -50px;
- margin-top: -40px;
- height: 40px;
- width: 40px;
- position: absolute;"></div>
- </div>
-
- <div id="menustuff" class="hidden">
- <button class="accordion">Partizipation</button>
- <div class="sub-menu">
- <a href="#" onclick="showtourSpecific('menu')">Böckingerstraße</a>
- </div>
- <button class="accordion">Energy</button>
- <div class="sub-menu">
- <a href="#" onclick="EnergiekonzeptFunction('nothing')">Stöckach</a><br>
+ <p id="umfrage_bock" class="contentOne">Die Reduzierung des privaten Wohnraums bedingt auch das Zusammenleben
+ im Quartier. Wohnfunktionen werden wieder in den öffentlichen Raum
+ und die Gemeinschaft verlagert und im Sinne von urbanen Gemeingütern
+ genutzt. Die Funktionsweise solcher Gemeingüter beruht dabei hauptsächlich
+ auf drei Grundelementen: der Ressource, einer Gruppe, die die Ressource
+ gemeinsam nutzt und den Regeln, die diese Gruppe zur Nutzung
+ festlegt. Aber wie kann man solche Gemeingüter in einem sich neu
+ entwickelnden Quartier implementieren?</p>
+ <p class="contentOne">In einem Realexperiment werden Konzepte und Ideen in Verknüpfung mit
+ lokalen Akteuren erarbeitet und ausprobiert. <br>
+ Der Garten des Imanuel Grözinger Hauses dient dabei als Ausgangspunkt. Drei Teams - Kommunikation,
+ Programm und Bau - führen Interviews, erarbeiten ein Programm
+ und eine bauliche Intervention vor Ort. Den Abschluss bildet ein Aktionstag
+ gemeinsam mit Bewohnern und Nachbarn.</p><br>
+ <p class="contentOne">Folgen Sie uns auf Instagram! Fotos und Videos führen Sie durch unsere
+ gesamte Woche in der Böckinger Straße.</p><br>
+ <p>@les_stuttgart</p>
+ <p>#ibasummerschool2019 #howtocommons #experiment</p>
+ </div>
+ <div></div>
+ </div>
- <a href="#" onclick="nordbahnview()">Nordbahnhof</a>
- </div>
- <button class="accordion">Acoustics</button>
- <div class="sub-menu">
- <a><strong>Lärmkarten:</strong></a><br>
- <a href="#">Straße</a><br>
- <button id ="btn_StreetDay" onclick="noisemap('Streetday')">Day</button>
- <button id ="btn_StreetNight" onclick="noisemap('Streetnight')">Night</button>
- <button id ="btn_StreetOff" onclick="noisemap('offS')">Off</button><br>
-
- <a href="#">Bahn</a><br>
- <button id ="btn_RailDay" onclick="noisemap('Railday')">Day</button>
- <button id ="btn_RailNight" onclick="noisemap('Railnight')">Night</button>
- <button id ="btn_RailOff" onclick="noisemap('offR')">Off</button>
- <br><a href="#">Flughafen</a><br>
- <button id ="btn_AirDay" onclick="noisemap('Airday')">Day</button>
- <button id ="btn_AirNight" onclick="noisemap('Airnight')">Night</button>
- <button id ="btn_AirOff" onclick="noisemap('offAir')">Off</button>
- <br><a href="#">Kombiniert</a><br>
- <button id ="btn_AllDay" onclick="noisemap('Allday')">Day</button>
- <button id ="btn_AllNight" onclick="noisemap('Allnight')">Night</button>
- <button id ="btn_AllOff" onclick="noisemap('offAll')">Off</button>
- <br><br>
- <a><strong>Noise Sensors (Live):</strong></a><br>
- <button id ="btn_NoiseSensOn" onclick="noisesens('on')">On</button>
- <button id ="btn_NoiseSensOff" onclick="noisesens('off')">Off</button><br><br>
- <a><strong>Noise Sensors (historisch):</strong></a><br>
- <button id ="btn_NoiseSensOpen" onclick="NoiseText();">Open</button><br>
- <!-- <div class="switch-toggle switch-3 switch-candy">
+ </div>
+ <button id="men_energie" onclick="setpositionVAR(false);" type="button" class="collapsible">Energie</button>
+ <div class="content">
- <input id="onR" name="state-d" type="radio" checked="" />
- <label for="onR" onclick="noisemap('Railday')">Day</label>
+ <button id="men_energie" onclick="EnergiekonzeptFunction('nothing');" type="button" class="collapsible">Energiekonzept</button>
+ <div class="content">
+ <h1 class="sticky" id="headOne">Energy Project Stöckach</h1>
- <input id="naR" name="state-d" type="radio" />
- <label for="naR" onclick="noisemap('Railnight')">Night</label>
-
- <input id="offR" name="state-d" type="radio" checked="checked" />
- <label for="offR" onclick="noisemap('offR')">OFF</label>
+ <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 id="energydemand" onclick="highlightFeatures('energydemand')" 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 class="slideshow-container">
+
+ <!-- Full-width images with number and caption text -->
+ <div class="mySlides2 fade">
+ <div class="numbertext">1 / 4</div>
+ <img src="images/content/contentstoeckach/img1.jpg" style="width:100%">
+ <div class="text">The estimated hourly heat energy demand (units: kW)</div>
+ </div>
+
+ <div class="mySlides2 fade">
+ <div class="numbertext">2 / 4</div>
+ <img src="images/content/contentstoeckach/img2.jpg" style="width:100%">
+ <div class="text">The estimated hourly energy demand for hot water generation (units: kW)</div>
+ </div>
+
+ <div class="mySlides2 fade">
+ <div class="numbertext">3 / 4</div>
+ <img src="images/content/contentstoeckach/img3.jpg" style="width:100%">
+ <div class="text">Electricity demand for non-residential spaces (units: kW)</div>
+ </div>
+
+ <div class="mySlides2 fade">
+ <div class="numbertext">4 / 4</div>
+ <img src="images/content/contentstoeckach/img4.jpg" style="width:100%">
+ <div class="text">Electricity demand for residential and spaces (units: kW)</div>
+ </div>
+
+
+ <!-- Next and previous buttons -->
+ <a class="prev" onclick="plusSlides(-1, 1)">❮</a>
+ <a class="next" onclick="plusSlides(1, 1)">❯</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>
+
+ </div>
- </div> -->
- </div>
+ </div>
+ <button id="solarpotential" onclick="highlightFeatures('solarpotential')" 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 an 8% less cost. PV curtailment due to over production and feed-in constraints could lower the share of integrated PV generation significantly above 35% penetration levels. There are both technological and market-based strategies to optimally integrate the local PV generation. However, such concepts must be analyzed further in greater detail. </p>
+ </div>
+ <button id="heatpump" onclick="highlightFeatures('heatpump')" 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. A direct comparison between the heat pumps and district heating is tricky because the emissions from a district heating plant heavily depends on it’s fuel mix. In Stuttgart, it is common to use a fuel mix comprising of coal, gas, and municipal waste to generate heat. <br>
+ It is more economically feasible to schedule the heat pump operation to supply the base-load heating and hot water demand. That increases the utilization of heat pump capacity, and therefore the rate of return on the investment. <br>
+ 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. <br>
+ </p>
+ <div class="slideshow-container">
+
+ <!-- Full-width images with number and caption text -->
+ <!-- <div class="mySlides"> -->
+
+ <img src="images/content/contentstoeckach/img5.jpg" style="width:100%; margin-bottom: 5em;">
+ <div class="text" style="margin-top:0em;">The capacity of heat pump(s) is allocated to supply base-load heat demand. The valley points of heat pump operation are filled by thermal storage charging action to improve heat pump capacity utilization.</div>
+ <!-- </div> -->
+ </div>
+ </div>
+ <button id="thermalstorage" onclick="highlightFeatures('thermalstorage')" 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 id="batterystorage" onclick="highlightFeatures('batterystorage')" 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>
+ <button id="localEnergy" onclick="highlightFeatures('energydemand')" type="button" class="collapsible">Is local energy transition economically competitive? </button>
+ <div class="content">
+ <p>The answer to this question has two layers. The first layer is the aggregated system level feasibility, which is what we can see from our study. The second layer is the benefit distribution and economic feasibility at the individual prosumer level that is something that requires much deeper analysis. <br>
+ We see at the system level; the local energy transition has a positive outlook. Some of the scenarios that we looked at recovered their total investment within the first 8 years.
+ <br></p>
+ <div class="slideshow-container">
+
+ <!-- Full-width images with number and caption text -->
+ <!-- <div class="mySlides"> -->
+
+ <img src="images/content/contentstoeckach/img6.jpg" style="width:100%; margin-bottom: 4em;">
+ <div class="text" style="margin-top:0em;">Comparison of the return of investment in each scenario until the breakeven point compared to the base scenario (units: EUR)</div>
+ <!-- </div> -->
+ </div>
+ </div>
+ </div>
+ <button id="men_energie" onclick="nordbahnview();" type="button" class="collapsible">Wärmebedarf</button>
+ <div class="content">
- <button class="accordion">Mobility</button>
- <div class="sub-menu">
- <a href="#" onclick="" >Bauarbeiten</a><br>
- <button class = "btn_on" onclick="getAccidents('CONSTRUCTION')">On</button>
- <button class = "btn_off" onclick="deleteAccidents('CONSTRUCTION')">Off</button><br>
-
+ <h1 class="headOne" id="headNordB">Nordbahnhof</h1>
+
+ <p class="contentOne">Im Nordbahnhof Areal ist ein Neubau geplant. Dieser kann in verschiedenen Aspekten mit den bestehenden Bauten verglichen werden.
+ Der Energie Nutzungs Aspekt kann nur bedingt herangezogen werden, da die Gebäude sehr unterschiedliche Nutzungen haben. Hier würde es sich anbieten verschiedene Planungen aufgrund ihrer Energienutzung zu vergleichen.
+ </p>
+ <div id="nordbplanung">
- <!-- <div class="switch-toggle switch-3 switch-candy">
+ </div>
+ <br>
+ <h2>Specific Space Heating Demand</h2>
+ <p>The specific space heating demand wurde mit SimStadt simuliert. Die Werte sind in [kWh/m²·a] angegeben.</p><br>
+ <div id="unconstrained"></div><br>
+ <span class="example-val" id="unconstrained-values"></span>
+
+ <div class='my-legend'>
+ <div class='legend-title'>in [kWh/m²·a] </div>
+ <div class='legend-scale'>
+ <ul class='legend-labels'>
+ <li class="One" id="One"><span class="rectangle" style='background:#38943d;'></span>min-100</li>
+ <li class="Two" id="Two"><span class="rectangle" style='background:#699438;'></span>100-200</li>
+ <li class="Three" id="Three"><span class="rectangle" style='background:#d0d40b;'></span>200-300</li>
+ <li class="Four" id="Four"><span class="rectangle" style='background:#db6f09;'></span>300-400</li>
+ <li class="Five" id="Five"><span class="rectangle" style='background:#ad0202;'></span>400-max</li>
+ </ul>
+ </div>
+ <!-- <div class='legend-source'>Source: <a href="#link to source">Name of source</a></div> -->
+ </div>
+ <div id="main_heatdem">
- <input id="acc-on" name="state-d" type="radio" checked="" />
- <label for="on" onclick="getAccidents('CONSTRUCTION')">ON</label>
-
- <input id="acc-off" name="state-d" type="radio" checked="true"/>
- <label for="na" onclick="deleteAccidents('CONSTRUCTION')">OFF</label>
-
- </div><br> -->
- <a href="#" onclick="" >Straßenschließungen</a><br>
- <button class = "btn_on" onclick="getAccidents('ROAD_CLOSURE')">On</button>
- <button class = "btn_off" onclick="deleteAccidents('ROAD_CLOSURE')">Off</button><br>
-
- <!-- <div class="switch-toggle switch-3 switch-candy">
+ </div>
+ <!-- <div id="slider-color"></div> -->
+ </div>
+
+ </div>
+ <button id="men_acoustic" type="button" class="collapsible">Akkustik</button>
+ <div class="content">
- <input id="road-on" name="state-d" type="radio" checked="" />
- <label for="on" onclick="getAccidents('ROAD_CLOSURE')">ON</label>
-
- <input id="road-off" name="state-d" type="radio" checked="true"/>
- <label for="na" onclick="deleteAccidents('ROAD_CLOSURE')">OFF</label>
-
- </div> -->
- <a href="#">Verkehrsflow</a><br>
- <button class = "btn_on" onclick="drawFlow()">On</button>
- <button class = "btn_off" onclick="deleteFlow()">Off</button><br>
-
+ <a><strong>Lärmkarten:</strong></a><br>
+ <a href="#">Straße</a><br>
+ <button id ="btn_StreetDay" onclick="noisemap('Streetday')">Day</button>
+ <button id ="btn_StreetNight" onclick="noisemap('Streetnight')">Night</button>
+ <button id ="btn_StreetOff" onclick="noisemap('offS')">Off</button><br>
+
+ <a href="#">Bahn</a><br>
+ <button id ="btn_RailDay" onclick="noisemap('Railday')">Day</button>
+ <button id ="btn_RailNight" onclick="noisemap('Railnight')">Night</button>
+ <button id ="btn_RailOff" onclick="noisemap('offR')">Off</button>
+ <br><a href="#">Flughafen</a><br>
+ <button id ="btn_AirDay" onclick="noisemap('Airday')">Day</button>
+ <button id ="btn_AirNight" onclick="noisemap('Airnight')">Night</button>
+ <button id ="btn_AirOff" onclick="noisemap('offAir')">Off</button>
+ <br><a href="#">Kombiniert</a><br>
+ <button id ="btn_AllDay" onclick="noisemap('Allday')">Day</button>
+ <button id ="btn_AllNight" onclick="noisemap('Allnight')">Night</button>
+ <button id ="btn_AllOff" onclick="noisemap('offAll')">Off</button>
+ <br><br>
+ <a><strong>Noise Sensors (Live):</strong></a><br>
+ <button id ="btn_NoiseSensOn" onclick="noisesens('on')">On</button>
+ <button id ="btn_NoiseSensOff" onclick="noisesens('off')">Off</button><br><br>
+ <a><strong>Noise Sensors (historisch):</strong></a><br>
+ <button id ="btn_NoiseSensOpen" onclick="NoiseText();">Open</button><br>
+ <h2>Lärmsensoren aus dem Luftdaten.info Projekt</h2><br>
+ <div id="loadingHistNoise"></div>
+ <label for="cars">Sensor wählen:</label>
+ <select class="dropbtn" style="border-radius: 3px; height: 3em; box-shadow: 0 8px 16px 0 #27272733, 0 6px 20px 0 rgba(0,0,0,0.19);" name="sensor" id="sensors">
+ <option value="49368">49368</option>
+ <option value="53627">53627</option>
+ <option value="29212">29212</option>
+ <option value="compLAeq">compare LAeq</option>
+ </select>
+ <a href="#" id ="btn_NoiseSensShow" style="width:6em !important; height:2em !important;border-radius: 3px; padding-top: 1em;padding-bottom: 2em;" onclick="getSTAHistNoise();setNoiseWaiting();HistNoiseData('49368')">anzeigen</a>
+ <!-- <div class="dropdown">
+ <button class="dropbtn">Sensor wählen:</button>
+ <div class="dropdown-content">
+ <a href="#" onclick="getSTAHistNoise();setNoiseWaiting();HistNoiseData('49368')">49368</a>
+ <a href="#">53627</a>
+ <a href="#">29212</a>
+ </div>
+ </div> -->
+ <!-- <p>The specific space heating demand wurde mit SimStadt simuliert. Die Werte sind in [kWh/m²·a] angegeben.</p><br>
+ <button onclick="HistNoiseData()">GetData</button>
+ <button onclick="showgraphNoise()">GetData</button> -->
+ <div id="unconstrained"></div><br>
+ <span class="example-val" id="unconstrained-values"></span>
+ <a>Ãœberblick Sensor</a>
+ <div style='width:100%;margin-top:10px;' id="chartNoise"></div>
+ <a>Genauere Sensordaten (LAeq)</a>
+ <div style='width:100%;margin-top:10px;' id="chartNoiseSTA"></div>
+ <!-- <div id="slider-color"></div> -->
+ <a>Da der Sensor in UTC format die Zeit misst wird hier keine Unterscheidung zwischen Sommer und Winterzeit gemacht.</a>
<!-- <div class="switch-toggle switch-3 switch-candy">
+
+ <input id="onR" name="state-d" type="radio" checked="" />
+ <label for="onR" onclick="noisemap('Railday')">Day</label>
+
+ <input id="naR" name="state-d" type="radio" />
+ <label for="naR" onclick="noisemap('Railnight')">Night</label>
+
+ <input id="offR" name="state-d" type="radio" checked="checked" />
+ <label for="offR" onclick="noisemap('offR')">OFF</label>
+
+ </div> -->
+
- <input id="flow-on" name="state-d" type="radio" checked="" />
- <label for="on" onclick="drawFlow()">ON</label>
-
- <input id="flow-off" name="state-d" type="radio" checked="true"/>
- <label for="na" onclick="deleteFlow()">OFF</label>
-
- </div> -->
- </div>
- <button class="accordion" onclick="getPosition();" >Navigation</button>
- <div class="sub-menu">
-
- <h1 class="sticky" style="background: dimgray" id="headNordB">Navigationsrechner</h1>
- <p class="contentOne">Bitte wählen Sie einen Start und Endpunkt für ihre Route aus.</p>
- <!-- <button onclick="setRouteCar();">TestPunkt</button> -->
- <div style="width:34em;">
- <button class="btn_standard" style="width:10em;height:2em;" onclick="getStart('Start');">Startpunkt</button>
- <input style="width:12em;height:2em;" type="text" id="Spunktlat" name="Spunktlat">
- <input style="width:12em;height:2em;" type="text" id="Spunktlon" name="Spunktlon"><br><br>
-
- <button class="btn_standard" style="width:10em;height:2em;" onclick="getStart('End');">Endpunkt</button>
- <input style="width:12em;height:2em;" type="text" id="Epunktlat" name="Epunktlat">
- <input style="width:12em;height:2em;" type="text" id="Epunktlon" name="Epunktlon"><br><br>
- <!-- <select>
- <option>mit Parkplatz</option>
- <option>ohne Parkplatz</option>
- </select> -->
- <button class="btn_standard" id="buttonCar" style="width:13em;height:2em;" onclick="setRouteCar();">Route berechnen (Auto)</button>
- <button class="btn_standard" id="buttonPub" style="width:13em;height:2em;" onclick="setRoutePublic();">Route berechnen (Öffis)<div id="loaderPub" style="display:none;" class="loader"></div></button>
- <button class="btn_standard" style="width:8em;height:2em;" onclick="deletenav();">Route löschen</button><br><br>
- <p class="contentOne">Duration with Car</p>
- <input type="text" id="Routeduration" name="Duration"><br>
- <p class="contentOne">Duration with Public</p>
- <input type="text" id="RoutedurationPub" name="Duration">
- <br>
- <div id="PubRouteShow" style="margin-top:1em;">
- <!-- <a>Startpunkt</a>
- <div class="walkingshape"></div>
- <a>Endpunkt</a> -->
- </div>
- </div></div>
- <button class="accordion" onclick="simstadtget();" >SimStadt</button>
- <!-- <button class="accordion" onclick="NoiseText();" >STA Noise</button> -->
- <!-- <div class="sub-menu">
- <a href="#" onclick="Navigationshow();getPosition();" >Car</a>
- <div class="switch-toggle switch-3 switch-candy">
-
- <input id="acc-on" name="state-d" type="radio" checked="" />
- <label for="on" onclick="drawnavcar()">ON</label>
-
- <input id="acc-off" name="state-d" type="radio" checked="true"/>
- <label for="na" onclick="">OFF</label><br><br>
-
- </div><br>
-
- </div> -->
+ </div>
+ <button id="men_mobility" type="button" class="collapsible">Mobilität</button>
+ <div class="content">
+ <a href="#" onclick="" >Bauarbeiten</a><br>
+ <button class = "btn_on" onclick="getAccidents('CONSTRUCTION')">On</button>
+ <button class = "btn_off" onclick="deleteAccidents('CONSTRUCTION')">Off</button><br>
+ <a href="#" onclick="" >Straßenschließungen</a><br>
+ <button class = "btn_on" onclick="getAccidents('ROAD_CLOSURE')">On</button>
+ <button class = "btn_off" onclick="deleteAccidents('ROAD_CLOSURE')">Off</button><br>
+ <a href="#">Verkehrsflow</a><br>
+ <button class = "btn_on" onclick="drawFlow()">On</button>
+ <button class = "btn_off" onclick="deleteFlow()">Off</button><br>
+ </div>
+ <button id="men_navigation" onclick="setpositionVAR(true);getPosition();" type="button" class="collapsible">Navigation</button>
+ <div class="content">
+ <h1 class="sticky" style="background: dimgray" id="headNordB">Navigationsrechner</h1>
+ <p class="contentOne">Bitte wählen Sie einen Start und Endpunkt für ihre Route aus.</p>
+ <div style="width:34em;">
+ <button class="btn_standard" style="width:10em;height:2em;" onclick="getStart('Start');">Startpunkt</button>
+ <input style="width:12em;height:2em;" type="text" id="Spunktlat" name="Spunktlat">
+ <input style="width:12em;height:2em;" type="text" id="Spunktlon" name="Spunktlon"><br><br>
+
+ <button class="btn_standard" style="width:10em;height:2em;" onclick="getStart('End');">Endpunkt</button>
+ <input style="width:12em;height:2em;" type="text" id="Epunktlat" name="Epunktlat">
+ <input style="width:12em;height:2em;" type="text" id="Epunktlon" name="Epunktlon"><br><br>
+
+ <button class="btn_standard" id="buttonCar" style="width:13em;height:2em;" onclick="setRouteCar();">Route berechnen (Auto)</button>
+ <button class="btn_standard" id="buttonPub" style="width:13em;height:2em;" onclick="setRoutePublic();">Route berechnen (Öffis)<div id="loaderPub" style="display:none;" class="loader"></div></button>
+ <button class="btn_standard" style="width:8em;height:2em;" onclick="deletenav();">Route löschen</button><br><br>
+ <p class="contentOne">Duration with Car</p>
+ <input type="text" id="Routeduration" name="Duration"><br>
+ <p class="contentOne">Duration with Public</p>
+ <input type="text" id="RoutedurationPub" name="Duration">
+ <br>
+ <div id="PubRouteShow" style="margin-top:1em;">
+ </div></div>
+ </div>
+ <button id="men_simstadt" type="button" class="collapsible">SimStadt</button>
+ <div class="content">
+
</div>
-
</div>
<!-- INTRO-.--------------------------
======================================================================================================= -->
<div id="IntroProj" class="SideInfo" style="display:none;">
- <h1 class="sticky" id="headOne">Intro zu unserer Plattform</h1>
+ <h1 class="sticky headOne" id="headOne">Intro zu unserer Plattform</h1>
<p class="contentOne">Die Reduzierung des privaten Wohnraums bedingt auch das Zusammenleben
im Quartier. Wohnfunktionen werden wieder in den öffentlichen Raum
@@ -530,7 +684,7 @@
======================================================================================================= -->
<div id="projektOne" class="SideInfo" style="display:none;">
- <h1 id="headOne">Böckinger Straße</h1>
+ <h1 class="headOne" id="headOne">Böckinger Straße</h1>
<!-- class="sticky" -->
<p class="contentOne">Die Reduzierung des privaten Wohnraums bedingt auch das Zusammenleben
im Quartier. Wohnfunktionen werden wieder in den öffentlichen Raum
@@ -551,140 +705,10 @@
<p>@les_stuttgart</p>
<p>#ibasummerschool2019 #howtocommons #experiment</p>
+ <div id="bilder_bock2">
<!-- Slideshow container -->
- <div class="slideshow-container">
-
- <!-- Full-width images with number and caption text -->
- <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)">❮</a>
- <a class="next" onclick="plusSlides(1, 0)">❯</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>
-
<p class="contentOne"><Strong>TEAM KOMMUNIKATION</Strong> arbeitet direkt mit den Anwohnern zusammen.
Wer sind relevante Akteure? Welches Potential bringen neue Akteure mit?
Welche Art der Kommunikation braucht es? In Interviews werden Bedürfnisse
@@ -758,7 +782,7 @@
<!-- Project Stoeckach Energiekonzept -->
<div id="Energiekonzept" class="SideInfo" style="display:none;">
- <h1 class="sticky" id="headOne">Energy Project Stöckach</h1>
+ <h1 class="sticky headOne" id="headOne">Energy Project Stöckach</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.
@@ -861,31 +885,36 @@
<!-- ======================================================================================================================================================================== -->
<!-- Nordbahnhof -->
<div id="NordbahnhofInfo" class="SideInfo" style="display:none;">
- <h1 class="sticky" id="headNordB">Nordbahnhof</h1>
+ <h1 class="headOne" id="headNordB">Nordbahnhof</h1>
<p class="contentOne">Im Nordbahnhof Areal ist ein Neubau geplant. Dieser kann in verschiedenen Aspekten mit den bestehenden Bauten verglichen werden.
Der Energie Nutzungs Aspekt kann nur bedingt herangezogen werden, da die Gebäude sehr unterschiedliche Nutzungen haben. Hier würde es sich anbieten verschiedene Planungen aufgrund ihrer Energienutzung zu vergleichen.
</p>
+ <div id="nordbplanung2">
+
+
+ </div>
<br>
<h2>Specific Space Heating Demand</h2>
<p>The specific space heating demand wurde mit SimStadt simuliert. Die Werte sind in [kWh/m²·a] angegeben.</p><br>
- <div id="unconstrained"></div><br>
- <span class="example-val" id="unconstrained-values"></span>
+
+ <div id="unconstrained2"></div><br>
+ <span class="example-val" id="unconstrained-values2"></span>
<div class='my-legend'>
<div class='legend-title'>in [kWh/m²·a] </div>
<div class='legend-scale'>
<ul class='legend-labels'>
- <li id="One"><span class="rectangle" style='background:#38943d;'></span>min-100</li>
- <li id="Two"><span class="rectangle" style='background:#699438;'></span>100-200</li>
- <li id="Three"><span class="rectangle" style='background:#d0d40b;'></span>200-300</li>
- <li id="Four"><span class="rectangle" style='background:#db6f09;'></span>300-400</li>
- <li id="Five"><span class="rectangle" style='background:#ad0202;'></span>400-max</li>
+ <li class="One" id="One2"><span class="rectangle" style='background:#38943d;'></span>min-100</li>
+ <li class="Two" id="Two2"><span class="rectangle" style='background:#699438;'></span>100-200</li>
+ <li class="Three" id="Three2"><span class="rectangle" style='background:#d0d40b;'></span>200-300</li>
+ <li class="Four" id="Four2"><span class="rectangle" style='background:#db6f09;'></span>300-400</li>
+ <li class="Five" id="Five2"><span class="rectangle" style='background:#ad0202;'></span>400-max</li>
</ul>
</div>
<!-- <div class='legend-source'>Source: <a href="#link to source">Name of source</a></div> -->
</div>
- <div style='width:100%;margin-top:200px;' id="chartNordB"></div>
+ <div id="main_heatdem2"></div>
<!-- <div id="slider-color"></div> -->
</div>
<!-- ======================================================================================================================================================================== -->
@@ -893,13 +922,13 @@
<div id="NoiseInfo" class="SideInfo" style="display:none;">
<!-- <h1 class="sticky" id="headNoise">Lärmdaten</h1>
<br> -->
- <h2>Lärmdaten aus Stuttgart</h2>
+ <h1 class="headOne">Lärmdaten aus Stuttgart</h1>
<br>
- <h4>Kombinierte Lärmkarten (Auto, Bahn, Flughafen)</h4><br>
+ <h2>Kombinierte Lärmkarten (Auto, Bahn, Flughafen)</h2><br>
<button id ="btn_RailDay" onclick="noisemap2('day')">Day</button>
<button id ="btn_RailNight" onclick="noisemap2('night')">Night</button>
<button id ="btn_RailOff" onclick="noisemap2('off')">Off</button><br><br>
- <h4>Lärmsensoren aus dem Luftdaten.info Projekt</h4><br>
+ <h2>Lärmsensoren aus dem Luftdaten.info Projekt</h2><br>
<div id="loadingHistNoise"></div>
<label for="cars">Sensor wählen:</label>
<select class="dropbtn" style="border-radius: 3px; height: 3em; box-shadow: 0 8px 16px 0 #27272733, 0 6px 20px 0 rgba(0,0,0,0.19);" name="sensor" id="sensors">
@@ -968,7 +997,10 @@
</div>
<!-- End of: Content Tour -->
</div>
-
+ <div class="logo_kk" onclick="Introshow();setpositionVAR(false);">
+ <img id="logo_Main" src="images/logo/Logo.svg">
+ <p id="logo_title"><span style="color: red">K</span>essel<span style="color: red">K</span>ompass</p>
+ </div>
<div id="vcs_map_container"></div>
<!--div id="vcs_map_container">
diff --git a/vcm/js/navigation.js b/vcm/js/navigation.js
index 039995113622063d8e07b572d1bd75b7bc5a1271..e1221279da957821c58faee86e7acae4c38a8b33 100644
--- a/vcm/js/navigation.js
+++ b/vcm/js/navigation.js
@@ -1,5 +1,5 @@
function getStart(point){
-
+position_var = true
pointsoe = point;
diff --git a/vcm/js/noise.js b/vcm/js/noise.js
index c71af129407881d8d17e48bb8b34645c24c32d39..d8cf89d9cccf0fd1316f86c3812f233b438e8beb 100644
--- a/vcm/js/noise.js
+++ b/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() &&
diff --git a/vcm/templates/UserBalloon.js b/vcm/templates/UserBalloon.js
index 57841fa9e170848e048d29997473c61c9041f5d6..2198f0145e6f6d7ee0015817164b248bb376c8f2 100644
--- a/vcm/templates/UserBalloon.js
+++ b/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) {
diff --git a/vcm/templates/cus_Menu.css b/vcm/templates/cus_Menu.css
index 01801ff27cebb42380cfdd11ae84faaee4be5784..802f2766e4510f1951f50b3b8cef69475c7b9985 100644
--- a/vcm/templates/cus_Menu.css
+++ b/vcm/templates/cus_Menu.css
@@ -65,6 +65,7 @@
.active:after {
content: "\2212";
+ float:right;
}
/* Show the dropdown menu on hover */
diff --git a/vcm/templates/cus_Menu.js b/vcm/templates/cus_Menu.js
index 9b2c9d9f5e6c8ffd9ba02a1d91f9dfb2d02f5e1a..a633d01dc308b0de2ea36f84e88edf20eb5dacb1 100644
--- a/vcm/templates/cus_Menu.js
+++ b/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)">❮</a>'+
+ '<a class="next" onclick="plusSlides(1, 0)">❯</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 </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
diff --git a/vcm/templates/custom.css b/vcm/templates/custom.css
index 82ed1722f73948a1f23d94d93a4bd4061a901a28..b8678015fddff77799f9ab1bc2b8234b36d2351b 100644
--- a/vcm/templates/custom.css
+++ b/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;
}
diff --git a/vcm/templates/custom.js b/vcm/templates/custom.js
index 3b25933f4e356897bb7cc27719dae1c79a6b9934..066fa0e6fdc094beb3f7378d6a57fac5423604cc 100644
--- a/vcm/templates/custom.js
+++ b/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
diff --git a/vcm/templates/slider.js b/vcm/templates/slider.js
index 8582adb5c51322e9a43ba28f6e8314e8483fae98..08e4d7ab5fee8c41cc2213bdc70b50fe9d139176 100644
--- a/vcm/templates/slider.js
+++ b/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
diff --git a/vcm/templates/sliders.css b/vcm/templates/sliders.css
index f4f147400993678a366ed74c01b44dc1a2a8871b..62a65fd4dab35363a060243c54001ddda22a3c1f 100644
--- a/vcm/templates/sliders.css
+++ b/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;
}
diff --git a/vcm/templates/story/story.css b/vcm/templates/story/story.css
index ffe2a4c968c926864ab1555f399de64c2890ff1c..d7a87158225e1bd13cf07f2501edc42f98ac6af3 100644
--- a/vcm/templates/story/story.css
+++ b/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;