Fixed issue #47 the track-slider will now be green if dimmer device is on

static/css/bootstrap-slider.css

@@ -152,9 +152,6 @@
 }
 .slider-selection {
   position: absolute;
-  background-image: -webkit-linear-gradient(top, #f9f9f9 0%, #f5f5f5 100%);
-  background-image: -o-linear-gradient(top, #f9f9f9 0%, #f5f5f5 100%);
-  background-image: linear-gradient(to bottom, #f9f9f9 0%, #f5f5f5 100%);
   background-repeat: repeat-x;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff9f9f9', endColorstr='#fff5f5f5', GradientType=0);
   -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);

static/css/custom.css

@@ -6407,3 +6407,14 @@ ul.notifications {
 .hide_update {
     display: None;
 }
+
+.slider_on {
+  background-image: -webkit-linear-gradient(top, #f9f9f9 0%, green 100%);
+  background-image: -o-linear-gradient(top, #f9f9f9 0%, green 100%);
+  background-image: linear-gradient(to bottom, #f9f9f9 0%, green 100%);
+}
+.slider_off {
+  background-image: -webkit-linear-gradient(top, #f9f9f9 0%, #f5f5f5 100%);
+  background-image: -o-linear-gradient(top, #f9f9f9 0%, #f5f5f5 100%);
+  background-image: linear-gradient(to bottom, #f9f9f9 0%, #f5f5f5 100%);
+}

static/js/bootstrap-slider.js

@@ -410,8 +410,9 @@
 				sliderTrackLow.className = "slider-track-low";
 
 				sliderTrackSelection = document.createElement("div");
-				sliderTrackSelection.className = "slider-selection";
+				//sliderTrackSelection.className = "slider-selection";
-
+				sliderTrackSelection.id = this.options.id + "_track";
+				sliderTrackSelection.className = "slider-selection slider_" + this.options.state
 				sliderTrackHigh = document.createElement("div");
 				sliderTrackHigh.className = "slider-track-high";
 
@@ -766,7 +767,8 @@
 				scale: 'linear',
 				focus: false,
 				tooltip_position: null,
-				labelledby: null
+				labelledby: null,
+				state: 'off'
 			},
 
 			getElement: function() {

static/js/domoboard.js

@@ -21,7 +21,6 @@ function changeSwitch(checkboxElem, idx) {
     requestAPI(flask_server + "/api?type=command&param=switchlight&idx=" + idx + "&switchcmd=Off"  );
   }
 }
-
 // Dimmer functions
 function changeDimmer(checkboxElem, idx) {
   var chkurl = "/api?type=devices&rid=" + idx;
@@ -32,8 +31,22 @@ function changeDimmer(checkboxElem, idx) {
     } else {
       requestAPI(flask_server + "/api?type=command&param=switchlight&idx=" + idx + "&switchcmd=On&level=0");
     }
+    setDimmerState(checkboxElem, idx);
   });
 }
+
+function setDimmerState(id, idx) {
+  var url = "/api?type=devices&rid=" + idx;
+  requestAPI(flask_server + url, function(d) {
+    _json = JSON.parse(d);
+    if (_json['result'][0]['Data'] != 'Off') {
+      $('#' + id).css({'background-image': '-webkit-linear-gradient(top, #f9f9f9 0%, green 100%)', 'background-image': '-o-linear-gradient(top, #f9f9f9 0%, green 100%)', 'background-image': 'linear-gradient(to bottom, #f9f9f9 0%, green 100%)'});
+    } else {
+      $('#' + id).css({'background-image': '-webkit-linear-gradient(top, #f9f9f9 0%, #f5f5f5 100%)', 'background-image': '-o-linear-gradient(top, #f9f9f9 0%, #f5f5f5 100%)', 'background-image': 'linear-gradient(to bottom, #f9f9f9 0%, #f5f5f5 100%)'});
+    }
+  });
+}
+
 // Switch functions
 function changePush(idx, action) {
   if (action == 'on') {
@@ -149,9 +162,15 @@ function dimmerSlider(updateDimmers, block) {
     url = "/api?type=devices&rid=" + dimmerID;
     requestAPI(url, function(d) {
   		var percentage = JSON.parse(d).result[0].Level;
-  		$('#dimmer_' + dimmerID + "_block_" + block).slider({min:0, max:100, value: percentage}).on('slideStop', function(ev) { changeDimmerSlider($(this).attr('id'), ev.value) } ).data('slider');
+  		$('#dimmer_' + dimmerID + "_block_" + block).slider({min:0, max:100, value: percentage}).on('slideStop', function(ev) {
-  		$('#dimmer_' + dimmerID + "_block_" + block).slider().on('slideStop', function(ev) { changeDimmerSlider($(this).attr('id'), ev.value) } ).data('slider');
+        setDimmerState('dim_' + dimmerID + "_block_" + block + "_track", dimmerID);
-	   });
+        changeDimmerSlider($(this).attr('id'), ev.value) } ).data('slider');
+  		$('#dimmer_' + dimmerID + "_block_" + block).slider().on('slideStop', function(ev) {
+        setDimmerState('dim_' + dimmerID + "_block_" + block + "_track", dimmerID);
+        changeDimmerSlider($(this).attr('id'), ev.value)
+      } ).data('slider');
+      setDimmerState('dim_' + dimmerID + "_block_" + block + "_track", dimmerID);
+     });
   });
 }
 

templates/footer.html

@@ -9,7 +9,6 @@
 <!-- Domoboard -->
 <script src="/static/js/custom.js"></script>
 <!-- bootstrap-slider -->
-<link href="/static/css/bootstrap-slider.css" rel="stylesheet">
 <script type="text/javascript" src="/static/js/bootstrap-slider.js"></script>
 <script type="text/javascript" src="static/js/moment.min.js"></script>
 {% if configValues["domoboard"].get("time") == "True" %}

templates/header.html

@@ -43,6 +43,7 @@
 
   <!-- Custom styling plus plugins  -->
   <script src="/static/js/jquery.nicescroll.min.js"></script>
+
   <script src="/static/js/bootstrap-switch.js"></script>
   <script src="/static/js/bootstrap.min.js"></script>
   <script src="/static/js/colorpicker/bootstrap-colorpicker.min.js"></script>

templates/switches.html

@@ -1,4 +1,5 @@
 <link href="/static/css/bootstrap-switch.css" rel="stylesheet" type="text/css" />
+<link href="/static/css/bootstrap-slider.css" rel="stylesheet">
 <link href="/static/css/buttons.css" rel="stylesheet" type="text/css" />
 <div class="col-md-6 col-sm-6 col-xs-12">
   <div class="x_panel">
@@ -25,7 +26,7 @@
               {% if "switch" in v[1]  %}
               <input id="switch_{{v[0]}}_block_{{count}}" type="checkbox" checked data-size="mini">
               {% elif "dimmer" in v[1] %}
-            <input id="dimmer_{{v[0]}}_block_{{count}}" data-slider-id='dimmer_{{v[0]}}' type="text" test={{ v[1] }} data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="14" />
+            <input id="dimmer_{{v[0]}}_block_{{count}}" data-slider-id='dim_{{v[0]}}_block_{{count}}' type="text" test={{ v[1] }} state="on" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="14" />
               {% elif "pushon" in v[1] %}
                 <button id="push_{{v[0]}}_block_{{count}}" class="btn  btn-primary btn-circle">&nbsp;<li class="fa fa-power-off" aria-hidden="true"></i>&nbsp;</button>
                 {% elif "pushoff" in v[1] %}
@@ -43,7 +44,7 @@
                          </div>
                      </div>
               {% elif "rgb" in v[1] %}
-              &nbsp;<input id="dimmer_{{v[0]}}_block_{{count}}" data-slider-id='dimmer_{{v[0]}}' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="14" />
+              &nbsp;<input id="dimmer_{{v[0]}}_block_{{count}}" data-slider-id='dim_{{v[0]}}_block_{{count}}' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="14" />
               <br><br>
               <button type="button" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#myModal-{{v[0]}}-block-{{count}}">RGB colors</button>
               <!-- Modal -->
@@ -131,10 +132,10 @@ $(document).ready(function() {
     {% elif (v[1] == "setpoint") %}
   		updateSetpoints_block_{{count}}.push("{{v[0]}}");
   	{% elif (v[1] == "dimmer" or v[1] == "rgb") %}
-    $('#dim_{{count}}').click(function(e) {
+      $('#dim_{{count}}').click(function(e) {
-      e.preventDefault();
+        e.preventDefault();
-      changeDimmer(this, {{v[0]}});
+        changeDimmer('dim_{{v[0]}}_block_{{count}}_track', {{v[0]}});
-    });
+      });
   		updateDimmers_block_{{count}}.push("{{v[0]}}");
   	{% endif %}
   {% endfor %}
@@ -144,5 +145,7 @@ $(document).ready(function() {
   setInterval(refreshSwitches, 9000, updateSwitches_block_{{count}}, {{count}});
   setInterval(dimmerSlider, 9000, updateDimmers_block_{{count}}, {{count}});
   setInterval(refreshSetpoints, 9000, updateSetpoints_block_{{count}}, {{count}});
+
 });
+
 </script>