Hello,
I have custom ui from https://www.webcomponents.org/element/PFElements/pf-progress-slider/demo/demo/index.html
pf-progress-slider: (in www/custom_ui)
<link rel="import" href="../polymer/polymer-element.html">
<link rel="import" href="../paper-slider/paper-slider.html">
<link rel="import" href="../iron-behaviors/iron-button-state.html">
<link rel="import" href="../paper-ripple-behavior.html">
<!--
### Styling
The following custom properties and mixins are available for styling:
Custom property | Description | Default
----------------------------------------|-----------------------------------------|-------------------------
`--pf-default-bar-color` | Default color of bar | silver
`--pf-pass-bar-color` | Passed color of bar | 27ae60
`--pf-fail-bar-color` | Failed color of bar | e74c3c
`--pf-skip-bar-color` | Skipped color of bar | 3498db
### Custom Events
Custom Event | Description
---------------------------------|----------------------------------------
`position-changed` | This event is Fired when position is changed
### Methods
Methods | Description
----------------------------------------|--------------------------
`setCurrentPos(value)` | Sets the current position of the slider to the given value
`getCurrentPos()` | Returns current value
`setPosState(state, step)` | Sets the state of the given step e.g. set step 3 as pass
@demo demo/index.html
-->
<dom-module id="pf-progress-slider">
<template>
<style>
* {
transition: 0.3s;
}
:host {
display: block;
height: 100%;
width: 100%;
}
#container {
display: inline-block;
margin: 0px;
padding: 0px;
transform-origin: 20px;
}
#progressbar {
display: table;
margin-left: 15px;
height: 8px;
width: calc(100% - 30px);
}
#slider {
width: 100%;
--paper-slider-height: 1px;
--paper-slider-knob-color: silver;
--paper-slider-knob-start-color: silver;
--paper-slider-knob-start-border-color: silver;
--paper-slider-container-color: silver;
--paper-slider-active-color: silver;
}
.pstep {
display: table-cell;
border-bottom: 4px solid transparent;
}
.default {
border-bottom-color: var(--pf-default-bar-color, silver);
}
.temp_a {
border-bottom-width: 6px;
border-bottom-color:var(--pf-pass-bar-color, red) ;
}
.temp_b {
border-bottom-width: 6px;
border-bottom-color:var(--pf-pass-bar-color, green) ;
}
.temp_c {
border-bottom-width: 6px;
border-bottom-color:var(--pf-pass-bar-color, blue) ;
}
.del {
/*border-bottom-width: 6px;*/
border-bottom-color:var(--pf-fail-bar-color, silver) ;
}
.current {
border-top-left-radius: 2px;
border-top-right-radius: 2px;
border-bottom-width: 8px !important;
}
</style>
<paper-input label="text input"></paper-input>
<demo-snippet>
<div style="width: 100%; text-align:center; padding: 10px 0px;"></div>
<button on-click="TempA">temp_a</button>
<button on-click="TempB">temp_b</button>
<button on-click="TempC">temp_c</button>
<button on-click="Delete">del</button>
<!--<input value="1" id="jump-val" type="text" onkeyup="jump(0, this)">-->
</div>
<div id="container">
<div id="progressbar"></div>
<paper-slider id="slider" min="1" max="{{steps}}"></paper-slider>
</div>
</demo-snippet>
</template>
<script>
/**
* `pf-progress-slider`
* Interval progress bar.
*
* @customElement
* @polymer
* @demo demo/index.html
*/
class PfProgressSlider extends Polymer.Element {
/**
* Returns the name of the element.
*/
static get is() {
return 'pf-progress-slider';
}
/**
* Returns the element properties.
* - vertical: boolean element indicating orientation.
* - steps: number element for the number of steps.
* - current: number element indicating current step.
*/
static get properties() {
return {
hass: {
type: Object,
},
vertical: {
type: Boolean,
value: false
},
steps: {
type: Number,
value: 24
},
current: {
type: Number,
value: 1
},
arrayHours: {
type: Array,
value: function() { return [] },
},
stateObj: {
type: Object,
},
};
}
/**
*
*/
TempA() {
this.setPosState('temp_a', 0);
}
TempB() {
this.setPosState('temp_b', 0);
}
TempC() {
this.setPosState('temp_c', 0);
}
Delete() {
this.setPosState('del', 0);
}
connectedCallback() {
super.connectedCallback();
for (var i = 0; i < this.steps; i++) {
var cell = document.createElement('div');
cell.classList.add('pstep', 'default');
this.$.progressbar.appendChild(cell);
}
this.$.container.style.width = '100%';
this.$.slider.$.sliderBar.style.paddingTop = '7px';
this.$.slider.$.sliderBar.style.paddingBottom = '7px';
this.$.slider.$.sliderKnob.querySelector('.slider-knob-inner').style.marginTop = '2px';
this.$.slider.$.sliderKnob.querySelector('.slider-knob-inner').style.marginBottom = '2px';
// this.$.slider._positionKnob = function(ratio) {
// this._setImmediateValue(this._calcStep(this._calcKnobPosition(ratio)));
// this._setRatio(this._calcRatio(this.immediateValue) * 100);
// var interval = 100 / this.max;
// this.$.sliderKnob.style.left = ((interval * (this.immediateValue-1)) + interval/2) + '%';
// if (this.dragging) {
// this._knobstartx = (this.ratio * this._w) / 100;
// this.translate3d(0, 0, 0, this.$.sliderKnob);
// }
// }
//this.$.slider._createRipple = function () {
// this._rippleContainer = this.$.sliderKnob;
// return Polymer.PaperInkyFocusBehaviorImpl._createRipple.call(this);
//}
if (this.vertical) {
this.$.container.style.transform = 'rotate(90deg)';
this.$.container.style.width = this.clientHeight + 'px';
var self = this;
this.$.slider._trackX = function (event) {
if (!this.dragging) {
this._trackStart(event);
}
var direction = this._isRTL ? -1 : 1;
var dx = Math.min(this._maxx, Math.max(this._minx, event.detail.dx * direction));
if (self.vertical)
dx = Math.min(this._maxx, Math.max(this._minx, event.detail.dy * direction));
this._x = this._startx + dx;
var immediateValue = this._calcStep(this._calcKnobPosition(this._x / this._w * 100));
this._setImmediateValue(immediateValue);
var translateX = ((this._calcRatio(this.immediateValue) * this._w) - this._knobstartx);
this.translate3d(translateX + 'px', 0, 0, this.$.sliderKnob);
}
this.$.slider._bardown = function (event) {
this._w = this.$.sliderBar.offsetWidth;
var rect = this.$.sliderBar.getBoundingClientRect();
var ratio = (event.detail.x - rect.left) / this._w * 100;
if (self.vertical)
ratio = (event.detail.y - rect.top) / this._w * 100;
if (this._isRTL) {
ratio = 100 - ratio;
}
var prevRatio = this.ratio;
this._setTransiting(true);
this._positionKnob(ratio);
this.debounce('expandKnob', this._expandKnob, 60);
if (prevRatio === this.ratio) {
this._setTransiting(false);
}
this.async(function () {
this.fire('change', { composed: true });
});
event.preventDefault();
this.focus();
}
}
this.$.slider._positionKnob(0);
this._setCurrent(1);
}
/**
*
*/
ready() {
super.ready();
var self = this;
this.$.slider.addEventListener('immediate-value-changed', function () { self._setCurrent(this.immediateValue) });
this.$.slider.addEventListener('value-changed', function () { self._setCurrent(this.value) });
}
setCurrentPos(value) {
if (value < 1 || value > this.steps || isNaN(value) || value == this.current)
return;
var diff = this.current - value;
for (var i = 0; i < Math.abs(diff); i++)
(diff < 0) ? this.$.slider.increment() : this.$.slider.decrement();
this.dispatchEvent(new CustomEvent('position-changed', { detail: { pos: this.current } }));
}
setPosState(state, step) {
var index = this.GetExistHours();
console.log(index);
console.log(this.arrayHours);
if(state != "del")
{
if(index == -1)
{
this.AddHour(state);
}
else
{
this.splice('arrayHours', index, 1);
this.AddHour(state);
}
}
if(state == "del" && index != -1)
{
this.splice('arrayHours', index, 1);
}
var serviceData = {entity_id: "input_text."+this.stateObj.state, value: this.arrayHours}
this.hass.callService('input_text', 'set_value', serviceData);
step = step || this.current;
if (step < 1 || step > this.steps)
return;
var steps = this.shadowRoot.querySelectorAll('.pstep');
steps[step - 1].classList.remove('default', 'temp_a', 'temp_b', 'temp_c', 'del');
steps[step - 1].classList.add(state);
if (step == this.current)
this.$.slider.increment();
this.dispatchEvent(new CustomEvent('position-changed', { detail: { pos: this.current } }));
}
AddHour(state) {
if(state == "temp_a")
{
this.push('arrayHours', 'A'+this.current);
}
if(state == "temp_b")
{
this.push('arrayHours', 'B'+this.current);
}
if(state == "temp_c")
{
this.push('arrayHours', 'C'+this.current);
}
}
GetExistHours() {
var indexA = this.arrayHours.indexOf("A"+this.current);
if(indexA != -1)
{
return indexA;
}
var indexB = this.arrayHours.indexOf("B"+this.current);
if(indexB != -1)
{
return indexB;
}
var indexC = this.arrayHours.indexOf("C"+this.current);
if(indexC != -1)
{
return indexC;
}
return -1;
}
_setCurrent(value) {
if (value < 1 || value > this.steps || isNaN(value))
return;
var steps = this.shadowRoot.querySelectorAll('.pstep');
steps[this.current - 1].classList.remove('current');
steps[value - 1].classList.add('current');
this.current = value;
this.dispatchEvent(new CustomEvent('position-changed', { detail: { pos: this.current } }));
}
getCurrentPos() {
/*this.stopProp(ev);*/
return this.stateObj.state;
/*this.get('arrayHour.s')*/
}
}
window.customElements.define(PfProgressSlider.is, PfProgressSlider);
</script>
</dom-module>
in configuration.yaml
customize:
sensor.slider_mon:
custom_ui_state_card: pf-progress-slider
frontend:
extra_html_url:
- /local/custom_ui/pf-progress-slider.html
sensor:
- platform: template
sensors:
slider_mon:
value_template: slider_mon
group:
group_sliders:
name: ' '
entities:
- sensor.slider_mon
Here is problem with holding state after refresh web page (red settings in picture).
I found this page with recorder (https://www.home-assistant.io/components/recorder/)
my settings:
recorder:
include:
entities:
- sensor.slider_mon
But this solution doesn’t work.
Is it necessary this problem solves in pf-progress-slider or in configuration.yaml and how? Thank you for respond.