add legend

vcm/config.json

@@ -445,10 +445,10 @@
         },{
           "template": [
             "<div class='balloon' style='width: 200px; background-color: #3C3C3C; color: #FFFFFF;' id='myBalloonNord'>",
+            "   <button class='infobtn' onclick='NordbahnhofText()'></button>",
             "   <h1 class='balloon-title' style='color: #FFFFFF;'>Nordbahnhof Planungskonzept</h1>",
             "   <div class='balloon-content' style='margin-right: 0px;'",
             "   </div>",
-            "<p class='balloon-text'><span>Für mehr Infos klicken Sie bitte hier!</span><br></p>",
             "<div class='box-3'>",
             "<div class='btn btn-three' onclick='newPlan()'>",
             "<span>Neue Planung</span>",

vcm/datasource-data/PartOfStuggiWithAll/tileset.json

+{
+	"asset" : {
+		"version" : "0.0"
+	},
+	"properties" : {
+		"gml_id" : {},
+		"gml_parent_id" : {},
+		"citygml_target_uri" : {},
+		"citygml_feature_role" : {},
+		"citygml_feature_role_attr_name" : {},
+		"citygml_feature_role_attr_val" : {},
+		"gml_description" : {},
+		"gml_name" : {},
+		"citygml_creationDate" : {},
+		"citygml_terminationDate" : {},
+		"externalReference{}.externalObject.name" : {},
+		"externalReference{}.externalObject.uri" : {},
+		"externalReference{}.informationSystem" : {},
+		"citygml_generalizes_to{}.xlink_href" : {},
+		"citygml_relative_to_terrain" : {},
+		"citygml_relative_to_water" : {},
+		"citygml_appearance{}.xlink_href" : {},
+		"citygml_class" : {},
+		"citygml_class_codeSpace" : {},
+		"citygml_function{}" : {},
+		"citygml_function{}.codeSpace" : {},
+		"citygml_usage{}" : {},
+		"citygml_usage{}.codeSpace" : {},
+		"citygml_year_of_construction" : {},
+		"citygml_year_of_demolition" : {},
+		"citygml_roof_type" : {},
+		"citygml_roof_type_codeSpace" : {},
+		"citygml_measured_height" : {
+			"minimum" : 1.6,
+			"maximum" : 24.3
+		},
+		"citygml_measured_height_units" : {},
+		"citygml_storeys_above_ground" : {},
+		"citygml_storeys_below_ground" : {},
+		"citygml_storey_heights_above_ground" : {},
+		"citygml_storey_heights_above_ground_units" : {},
+		"citygml_storey_heights_below_ground" : {},
+		"citygml_storey_heights_below_ground_units" : {},
+		"citygml_outer_building_installation{}.xlink_href" : {},
+		"citygml_interior_building_installation{}.xlink_href" : {},
+		"citygml_bounded_by{}.xlink_href" : {},
+		"citygml_level_of_detail{}" : {},
+		"citygml_interior_room{}.xlink_href" : {},
+		"citygml_consists_of_building_part{}.xlink_href" : {},
+		"citygml_address{}.xlink_href" : {},
+		"LoD1_datenquelleBodenhoehe" : {},
+		"LoD1_datenquelleLage" : {},
+		"alkisId" : {},
+		"anzahlDerDreiBisVierZimmerWohnungen" : {},
+		"anzahlDerFuenfUndMehrZimmerWohnungen" : {},
+		"baublockNummer" : {},
+		"baublockseitenNummer" : {},
+		"dachgeschossausbau" : {},
+		"gebaeudekennzeichen_1" : {},
+		"gebaeudekennzeichen_2" : {},
+		"geschossflaeche" : {},
+		"gmlIdALKISLageBezeichnung_1" : {},
+		"gmlIdALKISLageBezeichnung_2" : {},
+		"grundflaeche" : {},
+		"hoeheEFH" : {},
+		"hoeheFirst" : {},
+		"hoeheTrauf" : {},
+		"statusDesGebaeudes" : {},
+		"umbauterRaum" : {}
+	},
+	"geometricError" : 225.65855423675384,
+	"root" : {
+		"boundingVolume" : {
+			"box" : [ 4155305.234884402, 672842.5487232395, 4775768.442179372, 668.5917059811763, 0, 0, 0, 783.0869944699807, 0, 0, 0, 580.2606065925211 ]
+		},
+		"refine" : "ADD",
+		"content" : {
+			"boundingVolume" : {
+				"box" : [ 4155305.234884402, 672842.5487232395, 4775768.442179372, 668.5917059811763, 0, 0, 0, 783.0869944699807, 0, 0, 0, 580.2606065925211 ]
+			},
+			"url" : "data/data0.b3dm"
+		}
+	}
+}
\ No newline at end of file

vcm/images/Info.svg

+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><defs><style>.cls-1{stroke:#000;stroke-width:7px;opacity:0.11;}.cls-1,.cls-3{stroke-miterlimit:10;}.cls-2{fill:#fff;}.cls-3{fill:none;stroke:#fff;stroke-width:10px;}</style></defs><title>locationArtboard 1</title><circle class="cls-1" cx="150" cy="150" r="142"/><path class="cls-2" d="M116.53,249.71v-9.06c20.37-1.94,22.64-3.56,22.64-25.55V148.48c0-20-1-21.35-20.38-24.58v-7.76a211.88,211.88,0,0,0,45.93-12.94V215.1c0,22,2.26,23.61,23.28,25.55v9.06Zm33.63-178.2c-9,0-17.14-8.09-17.14-17.14a17.47,17.47,0,0,1,17.47-17.79c9,0,16.49,7.44,16.49,17.79C167,63.42,159.54,71.51,150.16,71.51Z"/><circle class="cls-3" cx="151" cy="150" r="142"/></svg>
\ No newline at end of file

vcm/index.html

@@ -151,6 +151,7 @@
 	<link rel="stylesheet" href="templates/custom.css">
     <link rel="stylesheet" href="templates/story/story.css">
     <link rel="stylesheet" href="templates/cus_Menu.css">
+    <link rel="stylesheet" href="sources/nouislider.css">
     
 	
   </head>
@@ -529,7 +530,36 @@
                         </div>
             </div>
         </div>
-
+        <!-- ======================================================================================================================================================================== -->
+        <!-- Nordbahnhof -->
+        <div id="NordbahnhofInfo" class="SideInfo" style="display:none;">
+            <h1 class="sticky" 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>
+            <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 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>
+                  </ul>
+                </div>
+                <!-- <div class='legend-source'>Source: <a href="#link to source">Name of source</a></div> -->
+            </div>
+        <!-- <div id="slider-color"></div> -->
+        </div>
+        
       </div>
       <div id="tour-button" title="Karte/Story umschalten">
           <i class="fa"></i>
@@ -548,6 +578,9 @@
     <script src="lib/Cesium/Cesium.js"></script>
     <script src='lib/vcm_thirdparty.js'></script>
     <script src="lib/vcm-compiled_api.js"></script>
+    <script src="sources/nouislider.js"></script>
+    <script src="templates/slider.js"></script>
+    <link href="templates/sliders.css" rel="stylesheet">
 
 	<script>
       var startVCM = function() {

vcm/sources/nouislider.css

+/*! nouislider - 14.6.0 - 6/27/2020 */
+/* Functional styling;
+ * These styles are required for noUiSlider to function.
+ * You don't need to change these rules to apply your design.
+ */
+.noUi-target,
+.noUi-target * {
+  -webkit-touch-callout: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-user-select: none;
+  -ms-touch-action: none;
+  touch-action: none;
+  -ms-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.noUi-target {
+  position: relative;
+}
+.noUi-base,
+.noUi-connects {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  z-index: 1;
+}
+/* Wrapper for all connect elements.
+ */
+.noUi-connects {
+  overflow: hidden;
+  z-index: 0;
+}
+.noUi-connect,
+.noUi-origin {
+  will-change: transform;
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  right: 0;
+  -ms-transform-origin: 0 0;
+  -webkit-transform-origin: 0 0;
+  -webkit-transform-style: preserve-3d;
+  transform-origin: 0 0;
+  transform-style: flat;
+}
+.noUi-connect {
+  height: 100%;
+  width: 100%;
+}
+.noUi-origin {
+  height: 10%;
+  width: 10%;
+}
+/* Offset direction
+ */
+.noUi-txt-dir-rtl.noUi-horizontal .noUi-origin {
+  left: 0;
+  right: auto;
+}
+/* Give origins 0 height/width so they don't interfere with clicking the
+ * connect elements.
+ */
+.noUi-vertical .noUi-origin {
+  width: 0;
+}
+.noUi-horizontal .noUi-origin {
+  height: 0;
+}
+.noUi-handle {
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  position: absolute;
+}
+.noUi-touch-area {
+  height: 100%;
+  width: 100%;
+}
+.noUi-state-tap .noUi-connect,
+.noUi-state-tap .noUi-origin {
+  -webkit-transition: transform 0.3s;
+  transition: transform 0.3s;
+}
+.noUi-state-drag * {
+  cursor: inherit !important;
+}
+/* Slider size and handle placement;
+ */
+.noUi-horizontal {
+  height: 18px;
+}
+.noUi-horizontal .noUi-handle {
+  width: 34px;
+  height: 28px;
+  right: -17px;
+  top: -6px;
+}
+.noUi-vertical {
+  width: 18px;
+}
+.noUi-vertical .noUi-handle {
+  width: 28px;
+  height: 34px;
+  right: -6px;
+  top: -17px;
+}
+.noUi-txt-dir-rtl.noUi-horizontal .noUi-handle {
+  left: -17px;
+  right: auto;
+}
+/* Styling;
+ * Giving the connect element a border radius causes issues with using transform: scale
+ */
+.noUi-target {
+  background: #FAFAFA;
+  border-radius: 4px;
+  border: 1px solid #D3D3D3;
+  box-shadow: inset 0 1px 1px #F0F0F0, 0 3px 6px -5px #BBB;
+}
+.noUi-connects {
+  border-radius: 3px;
+}
+.noUi-connect {
+  background: #3FB8AF;
+}
+/* Handles and cursors;
+ */
+.noUi-draggable {
+  cursor: ew-resize;
+}
+.noUi-vertical .noUi-draggable {
+  cursor: ns-resize;
+}
+.noUi-handle {
+  border: 1px solid #D9D9D9;
+  border-radius: 3px;
+  background: #FFF;
+  cursor: default;
+  box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB;
+}
+.noUi-active {
+  box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #DDD, 0 3px 6px -3px #BBB;
+}
+/* Handle stripes;
+ */
+.noUi-handle:before,
+.noUi-handle:after {
+  content: "";
+  display: block;
+  position: absolute;
+  height: 14px;
+  width: 1px;
+  background: #E8E7E6;
+  left: 14px;
+  top: 6px;
+}
+.noUi-handle:after {
+  left: 17px;
+}
+.noUi-vertical .noUi-handle:before,
+.noUi-vertical .noUi-handle:after {
+  width: 14px;
+  height: 1px;
+  left: 6px;
+  top: 14px;
+}
+.noUi-vertical .noUi-handle:after {
+  top: 17px;
+}
+/* Disabled state;
+ */
+[disabled] .noUi-connect {
+  background: #B8B8B8;
+}
+[disabled].noUi-target,
+[disabled].noUi-handle,
+[disabled] .noUi-handle {
+  cursor: not-allowed;
+}
+/* Base;
+ *
+ */
+.noUi-pips,
+.noUi-pips * {
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.noUi-pips {
+  position: absolute;
+  color: #999;
+}
+/* Values;
+ *
+ */
+.noUi-value {
+  position: absolute;
+  white-space: nowrap;
+  text-align: center;
+}
+.noUi-value-sub {
+  color: #ccc;
+  font-size: 10px;
+}
+/* Markings;
+ *
+ */
+.noUi-marker {
+  position: absolute;
+  background: #CCC;
+}
+.noUi-marker-sub {
+  background: #AAA;
+}
+.noUi-marker-large {
+  background: #AAA;
+}
+/* Horizontal layout;
+ *
+ */
+.noUi-pips-horizontal {
+  padding: 10px 0;
+  height: 80px;
+  top: 100%;
+  left: 0;
+  width: 100%;
+}
+.noUi-value-horizontal {
+  -webkit-transform: translate(-50%, 50%);
+  transform: translate(-50%, 50%);
+}
+.noUi-rtl .noUi-value-horizontal {
+  -webkit-transform: translate(50%, 50%);
+  transform: translate(50%, 50%);
+}
+.noUi-marker-horizontal.noUi-marker {
+  margin-left: -1px;
+  width: 2px;
+  height: 5px;
+}
+.noUi-marker-horizontal.noUi-marker-sub {
+  height: 10px;
+}
+.noUi-marker-horizontal.noUi-marker-large {
+  height: 15px;
+}
+/* Vertical layout;
+ *
+ */
+.noUi-pips-vertical {
+  padding: 0 10px;
+  height: 100%;
+  top: 0;
+  left: 100%;
+}
+.noUi-value-vertical {
+  -webkit-transform: translate(0, -50%);
+  transform: translate(0, -50%);
+  padding-left: 25px;
+}
+.noUi-rtl .noUi-value-vertical {
+  -webkit-transform: translate(0, 50%);
+  transform: translate(0, 50%);
+}
+.noUi-marker-vertical.noUi-marker {
+  width: 5px;
+  height: 2px;
+  margin-top: -1px;
+}
+.noUi-marker-vertical.noUi-marker-sub {
+  width: 10px;
+}
+.noUi-marker-vertical.noUi-marker-large {
+  width: 15px;
+}
+.noUi-tooltip {
+  display: block;
+  position: absolute;
+  border: 1px solid #D9D9D9;
+  border-radius: 3px;
+  background: #fff;
+  color: #000;
+  padding: 5px;
+  text-align: center;
+  white-space: nowrap;
+}
+.noUi-horizontal .noUi-tooltip {
+  -webkit-transform: translate(-50%, 0);
+  transform: translate(-50%, 0);
+  left: 50%;
+  bottom: 120%;
+}
+.noUi-vertical .noUi-tooltip {
+  -webkit-transform: translate(0, -50%);
+  transform: translate(0, -50%);
+  top: 50%;
+  right: 120%;
+}
+.noUi-horizontal .noUi-origin > .noUi-tooltip {
+  -webkit-transform: translate(50%, 0);
+  transform: translate(50%, 0);
+  left: auto;
+  bottom: 10px;
+}
+.noUi-vertical .noUi-origin > .noUi-tooltip {
+  -webkit-transform: translate(0, -18px);
+  transform: translate(0, -18px);
+  top: auto;
+  right: 28px;
+}

vcm/templates/custom.css

@@ -445,4 +445,28 @@ div.tour-top-navi {
   box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),  0 0 8px rgba(0,0,0,0.3),  0 8px 8px rgba(0,0,0,0.3),  inset -1px 0 1px #b9f3fe;
   -webkit-transition: all .5s ease;
   transition: all .5s ease;
-}
+}
\ No newline at end of file
+
+
+
+
+
+
+.infobtn {
+     border: none;
+     /* color: grey; */
+     /* padding: 12px 16px; */
+     /* font-size: 16px; */
+     cursor: pointer;
+     float:right;
+     background-color:rgb(60, 60, 60);
+ }
+ 
+ .infobtn:before {
+   content: url(../images/Info.svg);
+   width: 20px;
+   float: right;
+   /* margin-right: 5px; */
+   /* margin-top: -2px; */
+ }
+

vcm/templates/custom.js

@@ -55,6 +55,7 @@ function showtourSpecific(specify) {
     // para.innerHTML = "This is a paragraph.";
     // document.getElementById("old").innerHTML = para.innerHTML;
     document.getElementById("UmfrageOne").style.display = "none";
+    document.getElementById("NordbahnhofInfo").style.display = "none";
     document.getElementById("Energiekonzept").style.display = "none";
     document.getElementById("projektOne").style.display = "block";
     showTour();
@@ -103,6 +104,7 @@ function EnergiekonzeptFunction(content){
 
 
     document.getElementById("UmfrageOne").style.display = "none";
+    document.getElementById("NordbahnhofInfo").style.display = "none";
     document.getElementById("projektOne").style.display = "none";
     document.getElementById("Energiekonzept").style.display = "block";
     showTour();
@@ -206,6 +208,7 @@ function Questionnaire() {
 
   document.getElementById("projektOne").style.display = "none";
   document.getElementById("Energiekonzept").style.display = "none";
+  document.getElementById("NordbahnhofInfo").style.display = "none";
   document.getElementById("UmfrageOne").style.display = "block";
   showTour();
 
@@ -221,3 +224,12 @@ function goHome(){
   //stopStory()
   vcs.vcm.Framework.getInstance().getActiveMap().gotoViewPoint(viewp)
 }
+
+//---------------------------------------------------------------------------------------
+function NordbahnhofText() {
+  document.getElementById("projektOne").style.display = "none";
+  document.getElementById("Energiekonzept").style.display = "none"; 
+  document.getElementById("UmfrageOne").style.display = "none";
+  document.getElementById("NordbahnhofInfo").style.display = "block";
+  showTour();
+}
\ No newline at end of file

vcm/templates/newDevBahn.js

+var heatdemVal01 = 100
+var heatdemVal02 = 200
+var heatdemVal03 = 300
+var heatdemVal04 = 400
+
 
 function oldZust(){
 
@@ -281,11 +286,11 @@ function oldZust(){
       tileset.style = new Cesium.Cesium3DTileStyle({
         color: {
           conditions: [
-            ["(${Specificspaceheatingdemand} > 0)  && (${Specificspaceheatingdemand} < 100)", "color('#38943d')"],
-            ["(${Specificspaceheatingdemand} >= 100)  && (${Specificspaceheatingdemand} < 200)", "color('#699438')"],
-            ["(${Specificspaceheatingdemand} >= 200)  && (${Specificspaceheatingdemand} < 300)", "color('#d0d40b')"],
-            ["(${Specificspaceheatingdemand} >= 300)  && (${Specificspaceheatingdemand} < 400)", "color('#db6f09')"],
-            ["(${Specificspaceheatingdemand} >= 400)  && (${Specificspaceheatingdemand} < 500)", "color('#ad0202')"],
+            ["(${Specificspaceheatingdemand} > 0)  && (${Specificspaceheatingdemand} < " + heatdemVal01 + ")", "color('#38943d')"],
+            ["(${Specificspaceheatingdemand} >= " + heatdemVal01 + ")  && (${Specificspaceheatingdemand} < " + heatdemVal02 + ")", "color('#699438')"],
+            ["(${Specificspaceheatingdemand} >= " + heatdemVal02 + ")  && (${Specificspaceheatingdemand} < " + heatdemVal03 + ")", "color('#d0d40b')"],
+            ["(${Specificspaceheatingdemand} >= " + heatdemVal03 + ")  && (${Specificspaceheatingdemand} < " + heatdemVal04 + ")", "color('#db6f09')"],
+            ["(${Specificspaceheatingdemand} >= " + heatdemVal04 + ")  && (${Specificspaceheatingdemand} < 500)", "color('#ad0202')"],
             ["true", "color('#77a1b9')"],
           ],
         },
@@ -312,18 +317,11 @@ function oldZust(){
             conditions: [
                 ["${gml_id} === 'DEBW522AA0001fd8a'", "color('#FFFFFF')"],
                 ["${gml_id} === 'DEBW522AA00016448'", "color('#FFFFFF')"],
-                // ["(${citygml_measured_height} >= 1.0)", "color('#1a9641')"],
-                //["(${Specificspaceheatingdemand } > 287.3)", "color('#000000')"],
-                // ["(${Specific space heating demand} > 0)  && (${Specific space heating demand} < 60)", "color('#33ACFF')"],
-                // ["(${Specific space heating demand} >= 60) && (${Specific space heating demand} < 120)", "color('#2AFF00')"],
-                // ["(${Specific space heating demand} >= 120) && (${Specific space heating demand} < 170)", "color('#FFFF00')"],
-                // ["(${Specific space heating demand} >= 170) && (${Specific space heating demand} < 230)", "color('#FFA200')"],
-                // ["(${Specific_space_heating_demand} >= 230)", "color('#FF0000')"]
-                ["(${Specificspaceheatingdemand} > 70)  && (${Specificspaceheatingdemand} < 100)", "color('#38943d')"],
-                ["(${Specificspaceheatingdemand} >= 100)  && (${Specificspaceheatingdemand} < 200)", "color('#699438')"],
-                ["(${Specificspaceheatingdemand} >= 200)  && (${Specificspaceheatingdemand} < 300)", "color('#d0d40b')"],
-                ["(${Specificspaceheatingdemand} >= 300)  && (${Specificspaceheatingdemand} < 400)", "color('#db6f09')"],
-                ["(${Specificspaceheatingdemand} >= 400)  && (${Specificspaceheatingdemand} < 500)", "color('#ad0202')"],
+                ["(${Specificspaceheatingdemand} > 0)  && (${Specificspaceheatingdemand} < " + heatdemVal01 + ")", "color('#38943d')"],
+                ["(${Specificspaceheatingdemand} >= " + heatdemVal01 + ")  && (${Specificspaceheatingdemand} < " + heatdemVal02 + ")", "color('#699438')"],
+                ["(${Specificspaceheatingdemand} >= " + heatdemVal02 + ")  && (${Specificspaceheatingdemand} < " + heatdemVal03 + ")", "color('#d0d40b')"],
+                ["(${Specificspaceheatingdemand} >= " + heatdemVal03 + ")  && (${Specificspaceheatingdemand} < " + heatdemVal04 + ")", "color('#db6f09')"],
+                ["(${Specificspaceheatingdemand} >= " + heatdemVal04 + ")  && (${Specificspaceheatingdemand} < 500)", "color('#ad0202')"],
                 ["true", "color('#77a1b9')"],
             ],
           },
@@ -337,4 +335,8 @@ function oldZust(){
     //   console.log("layer.highlight({" + idtext + ":Cesium.Color.fromCssColorString('#BB8FCE')})")
     // }
 
-  }
+  }
\ No newline at end of file
+
+
+
+  
\ No newline at end of file

vcm/templates/slider.js

+var unconstrainedSlider = document.getElementById('unconstrained');
+var unconstrainedValues = document.getElementById('unconstrained-values');
+var value01html = document.getElementById('One')
+var value02html = document.getElementById('Two')
+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',
+    connect: [true, true, true, true, true],
+    range: {
+        'min': 0,
+        'max': 500
+    }
+});
+
+var connect = unconstrainedSlider.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]);
+}
+
+
+unconstrainedSlider.noUiSlider.on('update', function (values) {
+    // unconstrainedValues.innerHTML = values.join(' :: ');
+    value01html.innerHTML = "min - " + values[0];
+    value02html.innerHTML = values[0] + " - " + values[1];
+    value03html.innerHTML = values[1] + " - " + values[2];
+    value04html.innerHTML = values[2] + " - " + values[3];
+    value05html.innerHTML = values[3] + " - max";
+
+    var chk_ceil= document.getElementById("chxboxDemand");
+    if(chk_ceil.checked == true){
+
+        heatdemVal01 = values[0];
+        heatdemVal02 = values[1];
+        heatdemVal03 = values[2];
+        heatdemVal04 = values[3];
+
+ 
+      highlightEnergy();
+    }
+
+});
+
+// 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

vcm/templates/sliders.css

+ /* slider */
+ /* ------------------------------- */
+ .c-1-color { background: #38943d; }
+ .c-2-color { background: #699438; }
+ .c-3-color { background: #d0d40b; }
+ .c-4-color { background: #db6f09; }
+ .c-5-color { background: #ad0202; }
+
+ .rectangle {
+    height: 50px;
+    width: 100px;
+ 
+  }
+#One{
+    background-color: #38943d;
+}
+#Two{
+    background-color: #699438;
+}
+#Three{
+    background-color: #d0d40b;
+}
+#Four{
+    background-color: #db6f09;
+}
+#Five{
+    background-color: #ad0202;
+}
+
+.my-legend .legend-title {
+    text-align: left;
+    margin-bottom: 5px;
+    font-weight: bold;
+    font-size: 90%;
+    }
+  .my-legend .legend-scale ul {
+    margin: 0;
+    margin-bottom: 5px;
+    padding: 0;
+    float: left;
+    list-style: none;
+    }
+  .my-legend .legend-scale ul li {
+    font-size: 100%;
+    list-style: none;
+    margin-left: 0;
+    line-height: 30px;
+    width:150px;
+    margin-bottom: 2px;
+    font-weight: bold;
+    }
+  .my-legend ul.legend-labels li span {
+    display: block;
+    float: left;
+    height: 30px;
+    width: 70px;
+    margin-right: 5px;
+    margin-left: 0;
+    border: 1px solid #999;
+    }
+  .my-legend .legend-source {
+    font-size: 90%;
+    color: rgb(0, 0, 0);
+    clear: both;
+    }
+  .my-legend a {
+    color: rgb(0, 0, 0);
+    }
\ No newline at end of file