Skip to content
GitLab
"public/git@transfer.hft-stuttgart.de:zedflow/test-k1.git" did not exist on "1516015be3560b47039c8b416451114fb506d3e8"
Commit 3bbd4808 authored by Patrick's avatar Patrick
Browse files

Update UI

parent 4b9922b4
master NewS_cleaned New_Structure workingVersion LastWorking
1 merge request!1update some ui
Hide whitespace changes
Inline Side-by-side
Showing
with 836 additions and 484 deletions
+836 -484
vcm/css/menu.css
+ 64
- 0
View file @ 3bbd4808
......@@ -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
+ 2
- 1
View file @ 3bbd4808
@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 0 → 100644
+ 1
- 0
View file @ 3bbd4808
<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/index.html
+ 349
- 317
View file @ 3bbd4808
......@@ -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)">&#10094;</a>
<a class="next" onclick="plusSlides(1, 1)">&#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>
</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)">&#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>
<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">
......
vcm/js/navigation.js
+ 1
- 1
View file @ 3bbd4808
function getStart(point){
position_var = true
pointsoe = point;
......
vcm/js/noise.js
+ 16
- 16
View file @ 3bbd4808
......@@ -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
+ 10
- 2
View file @ 3bbd4808
......@@ -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
+ 1
- 0
View file @ 3bbd4808
......@@ -65,6 +65,7 @@
.active:after {
content: "\2212";
float:right;
}
/* Show the dropdown menu on hover */
......
vcm/templates/cus_Menu.js
+ 238
- 12
View file @ 3bbd4808
......@@ -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
+ 31
- 20
View file @ 3bbd4808
......@@ -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
+ 56
- 75
View file @ 3bbd4808
......@@ -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
+ 52
- 31
View file @ 3bbd4808
......@@ -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
+ 5
- 5
View file @ 3bbd4808
......@@ -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
+ 10
- 4
View file @ 3bbd4808
......@@ -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;
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal