mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-24 09:46:36 +00:00
ha-climate-control polymer widget (#212)
This replaces the climate paper-slider with a new control which is a numerical display plus up/down buttons. The paper-slider control really needs a fine pointer like a mouse or a stylus to function well, and in my use case the most often time I want to quick manually adjust the temperature is on a mobile device, where using the paper-slider is extremely problematic. The stepsize is now computed based on the units. 0.5 for C, 1.0 for F, which provides about the same granularity for both. The ha-climate-control widget is actually pretty generic, and could be used in other places if anyone has suggestions on a good generic name.
This commit is contained in:
parent
f396c9acde
commit
116277acb4
88
src/components/ha-climate-control.html
Normal file
88
src/components/ha-climate-control.html
Normal file
@ -0,0 +1,88 @@
|
||||
<link rel='import' href='../../bower_components/polymer/polymer.html'>
|
||||
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
|
||||
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
|
||||
|
||||
|
||||
<dom-module id="ha-climate-control">
|
||||
<template>
|
||||
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
|
||||
<style>
|
||||
/* local DOM styles go here */
|
||||
:host {
|
||||
@apply(--layout-flex);
|
||||
@apply(--layout-horizontal);
|
||||
@apply(--layout-justified);
|
||||
}
|
||||
.target-temperature {
|
||||
@apply(--layout-self-center);
|
||||
font-size: 200%;
|
||||
}
|
||||
.control-buttons {
|
||||
font-size: 200%;
|
||||
text-align: right;
|
||||
}
|
||||
paper-icon-button {
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- local DOM goes here -->
|
||||
<div class="target-temperature">
|
||||
[[value]] [[units]]
|
||||
</div>
|
||||
<div class="control-buttons">
|
||||
<div>
|
||||
<paper-icon-button icon="mdi:chevron-up" on-tap="incrementValue"></paper-icon-button>
|
||||
</div>
|
||||
<div>
|
||||
<paper-icon-button icon="mdi:chevron-down" on-tap="decrementValue"></paper-icon-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
Polymer({
|
||||
is: 'ha-climate-control',
|
||||
properties: {
|
||||
value: {
|
||||
type: Number,
|
||||
observer: 'valueChanged'
|
||||
},
|
||||
units: {
|
||||
type: String,
|
||||
},
|
||||
min: {
|
||||
type: Number,
|
||||
},
|
||||
max: {
|
||||
type: Number,
|
||||
},
|
||||
step: {
|
||||
type: Number,
|
||||
value: 1,
|
||||
},
|
||||
},
|
||||
incrementValue: function () {
|
||||
var newval = this.value + this.step;
|
||||
if (newval <= this.max) {
|
||||
this.value = newval;
|
||||
} else {
|
||||
this.value = this.max;
|
||||
}
|
||||
},
|
||||
decrementValue: function () {
|
||||
var newval = this.value - this.step;
|
||||
if (newval >= this.min) {
|
||||
this.value = newval;
|
||||
} else {
|
||||
this.value = this.min;
|
||||
}
|
||||
},
|
||||
valueChanged: function () {
|
||||
this.fire('change');
|
||||
},
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
</dom-module>
|
@ -9,6 +9,8 @@
|
||||
<link rel='import' href='../../bower_components/paper-toggle-button/paper-toggle-button.html'>
|
||||
<link rel="import" href="../../bower_components/paper-range-slider/paper-range-slider.html">
|
||||
|
||||
<link rel="import" href='../components/ha-climate-control.html'>
|
||||
|
||||
<dom-module id='more-info-climate'>
|
||||
<template>
|
||||
<style is="custom-style" include="iron-flex"></style>
|
||||
@ -95,28 +97,17 @@
|
||||
<div class$='[[computeClassNames(stateObj)]]'>
|
||||
<div class='container-temperature'>
|
||||
<div class$='single-row, [[stateObj.attributes.operation_mode]]'>
|
||||
<div hidden$='[[computeTargetTempHidden(stateObj)]]'>Target Temperature</div>
|
||||
<paper-slider
|
||||
min='[[stateObj.attributes.min_temp]]'
|
||||
max='[[stateObj.attributes.max_temp]]'
|
||||
secondary-progress='[[stateObj.attributes.max_temp]]'
|
||||
pin
|
||||
step='0.5'
|
||||
value='[[stateObj.attributes.temperature]]'
|
||||
hidden$='[[computeHideTempSlider(stateObj)]]'
|
||||
on-change='targetTemperatureSliderChanged'>
|
||||
</paper-slider>
|
||||
<paper-range-slider
|
||||
min='[[stateObj.attributes.min_temp]]'
|
||||
max='[[stateObj.attributes.max_temp]]'
|
||||
pin
|
||||
step='0.5'
|
||||
value-min='[[stateObj.attributes.target_temp_low]]'
|
||||
value-max='[[stateObj.attributes.target_temp_high]]'
|
||||
value-diff-min='2'
|
||||
hidden$='[[computeHideTempRangeSlider(stateObj)]]'
|
||||
on-change='targetTemperatureRangeSliderChanged'>
|
||||
</paper-range-slider>
|
||||
<div hidden$='[[computeTargetTempHidden(stateObj)]]'>Target
|
||||
Temperature</div>
|
||||
<ha-climate-control
|
||||
value='[[stateObj.attributes.temperature]]'
|
||||
units='[[stateObj.attributes.unit_of_measurement]]'
|
||||
step='[[computeTemperatureStepSize(stateObj.attributes.unit_of_measurement)]]'
|
||||
min='[[stateObj.attributes.min_temp]]'
|
||||
max='[[stateObj.attributes.max_temp]]'
|
||||
on-change='targetTemperatureChanged'
|
||||
>
|
||||
</ha-climate-control>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -267,6 +258,13 @@ Polymer({
|
||||
}
|
||||
},
|
||||
|
||||
computeTemperatureStepSize: function (units) {
|
||||
if (units.indexOf('F') !== -1) {
|
||||
return 1;
|
||||
}
|
||||
return 0.5;
|
||||
},
|
||||
|
||||
computeTargetTempHidden: function (stateObj) {
|
||||
return !stateObj.attributes.temperature &&
|
||||
!stateObj.attributes.target_temp_low &&
|
||||
@ -291,7 +289,7 @@ Polymer({
|
||||
);
|
||||
},
|
||||
|
||||
targetTemperatureSliderChanged: function (ev) {
|
||||
targetTemperatureChanged: function (ev) {
|
||||
var temperature = ev.target.value;
|
||||
|
||||
if (temperature === this.stateObj.attributes.temperature) return;
|
||||
|
Loading…
x
Reference in New Issue
Block a user