simon
/
domoboard
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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

This commit is contained in:
squandor 2017-01-08 17:35:08 +01:00
parent 013c4beea5
commit 5be60c31c6
7 changed files with 49 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
static/css/bootstrap-slider.css vendored
View File

@ -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);

11
static/css/custom.css
View File

@ -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%);
}

8
static/js/bootstrap-slider.js vendored
View File

@ -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() {

27
static/js/domoboard.js
View File

@ -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().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) {
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);
});
});
}

1
templates/footer.html
View File

@ -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" %}

1
templates/header.html
View File

@ -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>

15
templates/switches.html
View File

@ -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) {
e.preventDefault();
changeDimmer(this, {{v[0]}});
});
$('#dim_{{count}}').click(function(e) {
e.preventDefault();
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>