Skip to content

Commit

Permalink
Lots of pretification - BREAKING CHANGES
Browse files Browse the repository at this point in the history
  • Loading branch information
@thomasloven
thomasloven committed Nov 21, 2018
1 parent d800415 commit d3a3534
Show file tree
Hide file tree
Showing 2 changed files with 135 additions and 122 deletions.
93 changes: 67 additions & 26 deletions README.md
View file
@@ -1,38 +1,79 @@
slider-entity-row
=================

Add a slider to adjust brightness of lights, volume of media players or position of covers in lovelace entity cards

Proof of concept

No support given - if you don't know how to get this to work, that is probably a good thing for now.


---
![slider-entity-row](https://user-images.githubusercontent.com/1299821/48869222-b6303200-eddc-11e8-8b8c-7b4a9601df7a.png)

```yaml
resources:
- url: /local/slider-entity-row.js
type: js


views:
title: My view
cards:
- type: entities
entities:
- entity: light.my_lamp
name: A dimmable lamp
type: custom:slider-entity-row
```
![slider-entity-row](https://user-images.githubusercontent.com/1299821/44172580-e7161200-a0dd-11e8-8042-19199ad5d5ac.png)
- title: slider-entity-row
cards:
- type: entities
title: Domains
show_header_toggle: false
entities:
- input_number.slider

- type: section
label: light
- type: custom:slider-entity-row
entity: light.bed_light
- type: custom:slider-entity-row
entity: light.ceiling_lights
- type: custom:slider-entity-row
entity: light.kitchen_lights

### Other options
- type: section
label: media_player
- type: custom:slider-entity-row
entity: media_player.bedroom
- type: custom:slider-entity-row
entity: media_player.living_room
- type: custom:slider-entity-row
entity: media_player.lounge_room
- type: custom:slider-entity-row
entity: media_player.walkman

`hide_toggle: true` - Remove toggle
- type: section
label: cover
- type: custom:slider-entity-row
entity: cover.hall_window
- type: custom:slider-entity-row
entity: cover.garage_door
- type: custom:slider-entity-row
entity: cover.living_room_window

`break_slider: true` - Put slider on separate row
- type: entities
title: Options
show_header_toggle: false
entities:
- type: section
label: default
- type: custom:slider-entity-row
entity: light.bed_light
- type: custom:slider-entity-row
entity: media_player.bedroom
- type: custom:slider-entity-row
entity: cover.hall_window

`hide_when_off: true` - Hide the slider when the light is off
- type: section
label: "toggle: true"
- type: custom:slider-entity-row
entity: light.bed_light
toggle: true

`show_value: true` - Show the current dimmer value instead of toggle.
- type: section
label: "full_row: true"
- entity: light.bed_light
- type: custom:slider-entity-row
entity: light.bed_light
full_row: true
- entity: media_player.bedroom
- type: custom:slider-entity-row
entity: media_player.bedroom
full_row: true
- entity: cover.hall_window
- type: custom:slider-entity-row
entity: cover.hall_window
full_row: true
```
164 changes: 68 additions & 96 deletions slider-entity-row.js
View file
@@ -1,70 +1,71 @@
class SliderEntityRow extends Polymer.Element {

static get template() {
let slider = Polymer.html`
<paper-slider
min="0"
max="100"
value="{{value}}"
step="5"
pin
on-change="selectedValue"
ignore-bar-touch
on-click="stopPropagation">
</paper-slider>
`;
return Polymer.html`
<style>
hui-generic-entity-row {
margin: var(--ha-themed-slider-margin, initial);
}
.flex {
display: flex;
align-items: center;
}
.second-line paper-slider {
width: 100%;
}
</style>
<hui-generic-entity-row
config="[[_config]]"
hass="[[_hass]]"
>
<div class="flex">
<template is='dom-if' if='{{displayTop}}'>
${slider}
</template>
<template is='dom-if' if='{{displayToggle}}'>
<ha-entity-toggle
state-obj="[[stateObj]]"
hass="[[_hass]]"
></ha-entity-toggle>
</template>
<template is='dom-if' if='{{displayStatus}}'>
<div style="min-width: 40px">
[[statusString(stateObj)]]
const style = Polymer.html`
<style>
.flex {
display: flex;
align-items: center;
}
.state {
min-width: 45px;
text-align: center;
}
</style>
<template is="dom-if" if="{{!displayRow}}">
<style>
ha-slider {
width: 100%;
}
</style>
</template>
`;

const input = Polymer.html`
<div>
<template is="dom-if" if="{{displaySlider}}">
<div class="flex">
<ha-slider
min="0"
max="100"
value="{{value}}"
step="5"
pin
on-change="selectedValue"
on-click="stopPropagation"
ignore-bar-touch
></ha-slider>
<span class="state" on-click="stopPropagation">
<template is="dom-if" if="{{displayValue}}">
[[statusString(stateObj)]]
</template>
<template is="dom-if" if="{{displayToggle}}">
<ha-entity-toggle
state-obj="[[stateObj]]"
hass="[[_hass]]"
></ha-entity-toggle>
</template>
</span>
</div>
</template>
</div>
</hui-generic-entity-row>
<template is='dom-if' if='{{displayBottom}}'>
<div class="second-line">
${slider}
</div>
</template>
`
}
`;

static get properties() {
return {
_hass: Object,
_config: Object,
hideToggle: { type: Boolean, value: false },
breakSlider: { type: Boolean, value: false },
hideWhenOff: { type: Boolean, value: false },
showValue: { type: Boolean, value: false },
stateObj: { type: Object, value: null },
value: Number,
};
return Polymer.html`
${style}
<template is="dom-if" if="{{displayRow}}">
<hui-generic-entity-row
hass="[[_hass]]"
config="[[_config]]"
>
${input}
</hui-generic-entity-row>
</template>
<template is="dom-if" if="{{!displayRow}}">
${input}
</template>
`;
}

setConfig(config)
Expand Down Expand Up @@ -136,14 +137,15 @@ class SliderEntityRow extends Polymer.Element {


this._config = config;
this.stateObj = null;
const domain = config.entity.split('.')[0];
this.controller = CONTROLLERS[domain];
if(!this.controller) throw new Error('Unsupported entity domain: ' + domain);

this.hideToggle = config.hide_control || config.hide_toggle || false;
this.breakSlider = config.break_slider || false;
this.hideWhenOff = config.hide_when_off || false;
this.showValue = config.show_value || false;
this.displayRow = !config.full_row;
this.displayToggle = config.toggle && domain === 'light';
this.displayValue = !this.displayToggle;
this.displaySlider = false;
}

statusString(stateObj) {
Expand All @@ -152,42 +154,12 @@ class SliderEntityRow extends Polymer.Element {
return this.controller.string(stateObj, l18n);
}

updateSliders()
{
this.displayTop = false;
this.displayBottom = false;
this.displayToggle = true;
this.displayStatus = false;

if(this.hideToggle) this.displayToggle = false;

if(this.showValue) {
this.displayToggle = false;
this.displayStatus = true;
}

if(!(this.stateObj.state === 'on' || this.stateObj.state === 'off')) {
this.displayToggle = false;
this.displayStatus = true;
}

if(this.stateObj.state === 'on' || !this.hideWhenOff) {
this.displayBottom = this.breakSlider;
this.displayTop = !this.breakSlider;
}

if(!this.controller.supported(this.stateObj)) {
this.displayTop = this.displayBottom = false;
}

}

set hass(hass) {
this._hass = hass;
this.stateObj = this._config.entity in hass.states ? hass.states[this._config.entity] : null;
if(this.stateObj) {
this.value = this.controller.get(this.stateObj);
this.updateSliders();
this.displaySlider = this.controller.supported(this.stateObj);
}
}

Expand Down

0 comments on commit d3a3534

Please sign in to comment.