From 1541f693e78a00fe4a6f1c09f5c60725ca219d4d Mon Sep 17 00:00:00 2001 From: fineemb Date: Mon, 7 Sep 2020 01:29:00 +0800 Subject: [PATCH] v1.3.2 --- README.md | 13 +++----- fan-xiaomi.js | 87 +++++++++++++++++++++++++++++++++++++++++---------- 2 files changed, 76 insertions(+), 24 deletions(-) diff --git a/README.md b/README.md index 77d028d..886a2df 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,4 @@ - + # Xiaomi Fan Lovelace Card [![hacs_badge](https://img.shields.io/badge/HACS-Default-orange.svg)](https://github.com/custom-components/hacs) @@ -21,6 +14,10 @@ Xiaomi Smartmi Fan Lovelace card for HASS/Home Assistant. ## Update +### v1.3.2 + - Fix x1 support + - Add set delay off + - Optimize the oscillation adjustment UI ### v1.3.1 - Optimize the oscillation adjustment UI - Optimize the UI configuration panel diff --git a/fan-xiaomi.js b/fan-xiaomi.js index 37863be..9de7460 100644 --- a/fan-xiaomi.js +++ b/fan-xiaomi.js @@ -4,10 +4,10 @@ * @Description : * @Date : 2019-10-12 02:38:30 * @LastEditors : fineemb - * @LastEditTime : 2020-08-30 22:40:44 + * @LastEditTime : 2020-09-07 01:25:57 */ -console.info("%c Xiaomi Fan Card \n%c Version 1.3.1 ", "color: orange; font-weight: bold; background: black", "color: white; font-weight: bold; background: dimgray"); +console.info("%c Xiaomi Fan Card \n%c Version 1.3.2 ", "color: orange; font-weight: bold; background: black", "color: white; font-weight: bold; background: dimgray"); import 'https://unpkg.com/@material/mwc-slider@0.18.0/mwc-slider.js?module' const LitElement = Object.getPrototypeOf( customElements.get("ha-panel-lovelace") @@ -54,6 +54,8 @@ export class FanXiaomiCard extends LitElement { } const state = this.hass.states[this.config.entity]; const attrs = state.attributes; + let nowspeed = attrs['raw_speed'] || attrs['natural_speed'] || attrs['direct_speed'] + nowspeed = attrs['model']==='dmaker.fan.p5'?nowspeed:nowspeed/10 return html`
-
+
@@ -76,7 +78,7 @@ export class FanXiaomiCard extends LitElement { ${fan1s.map(i => html`
`)}
- +
@@ -94,7 +96,7 @@ export class FanXiaomiCard extends LitElement { r="170" fill="none" class="grab" - style="stroke: var(--paper-item-icon-active-color); fill: none; stroke-width: 8; stroke-dasharray: 1068.14; transform: rotate(90deg); transform-origin: 50% 50%; stroke-dashoffset: ${this.speedvalue?(1-this.speedvalue)* Math.PI*340:attrs['natural_speed']?(1-attrs['natural_speed']/100) * Math.PI*340:(1-attrs['direct_speed']/100) * Math.PI*340};"> + style="stroke: var(--paper-item-icon-active-color); fill: none; stroke-width: 8; stroke-dasharray: 1068.14; transform: rotate(90deg); transform-origin: 50% 50%; stroke-dashoffset: ${this.speedvalue?(1-this.speedvalue)* Math.PI*340:(1-nowspeed/100) * Math.PI*340};">
@@ -111,16 +113,31 @@ export class FanXiaomiCard extends LitElement {
- + + + + + ${attrs['model']==='dmaker.fan.p5'?attrs['delay_off_countdown']:Math.ceil(attrs['delay_off_countdown']/60)} + + + ${attrs['model']==='dmaker.fan.p5'?attrs['delay_off_countdown']:Math.ceil(attrs['delay_off_countdown']/60)} + + + + + - + - ${attrs['oscillate']?attrs['angle']==118?"120":attrs['angle']:"0"} + ${attrs['oscillate']?attrs['angle']==118?"120":attrs['angle']:"0"} + + + ${attrs['oscillate']?attrs['angle']==118?"120":attrs['angle']:"0"} - +
+
${this.config.name} @@ -148,20 +177,20 @@ export class FanXiaomiCard extends LitElement { return css ` #aspect-ratio {position: relative;} #aspect-ratio::before {content: "";display: block;padding-bottom: 100%;} - #aspect-ratio>:first-child {position: absolute;top: 0;left: 0;height: 100%;width: 100%;} + #aspect-ratio>:first-child {position: absolute;top: 0;left: 0;height: 100%;width: 100%; overflow: hidden;} #container{height: 100%;width: 100%;display: flex;overflow: hidden;} #buttons{position: absolute;bottom: 0;justify-content:center;width: calc( 100% - 20px );margin: 0 10px;} #buttons>*{position: relative;} #buttons.show{display: flex;} #buttons ha-icon-button ,#buttons mwc-icon-button{--mdc-icon-button-size: 32px; } #buttons tspan{text-anchor: middle;font-family: Helvetica, sans-serif;alignment-baseline: central;dominant-baseline: central;font-size: 10px;} - #angleslider{position: absolute;bottom: 0;width: calc( 100% - 20px );margin: 0 10px;z-index: 25;} + #angleslider,#delayslider{position: absolute;bottom: 0;width: calc( 100% - 20px );margin: 0 10px;z-index: 25;} #speedsvg {position: absolute;bottom: 0;width: calc( 100% - 20px );margin: 0 10px;} .c_icon {position: absolute;cursor: pointer;top: 0;right: 0;z-index: 25;} .c_icon.active{color:var(--paper-item-icon-active-color);fill:var(--paper-item-icon-active-color);} - .c_icon #oc{stroke:var(--primary-text-color)} - .c_icon.active #oc{stroke:var(--paper-item-icon-active-color);} + .c_icon .oc{stroke:var(--primary-text-color)} + .c_icon.active .oc{stroke:var(--paper-item-icon-active-color);} .offline{opacity:0.5} .ang1 {transform: rotate(0deg)}.ang2 {transform: rotate(5deg)}.ang3 {transform: rotate(10deg)}.ang4 {transform: rotate(15deg)}.ang5 {transform: rotate(20deg)}.ang6 {transform: rotate(25deg)}.ang7 {transform: rotate(30deg)}.ang8 {transform: rotate(35deg)}.ang9 {transform: rotate(40deg)}.ang10 {transform: rotate(45deg)}.ang11 {transform: rotate(50deg)}.ang12 {transform: rotate(55deg)}.ang13 {transform: rotate(60deg)}.ang14 {transform: rotate(65deg)}.ang15 {transform: rotate(70deg)}.ang16 {transform: rotate(75deg)}.ang17 {transform: rotate(80deg)}.ang18 {transform: rotate(85deg)}.ang19 {transform: rotate(90deg)}.ang20 {transform: rotate(95deg)}.ang21 {transform: rotate(100deg)}.ang22 {transform: rotate(105deg)}.ang23 {transform: rotate(110deg)}.ang24 {transform: rotate(115deg)}.ang25 {transform: rotate(120deg)}.ang26 {transform: rotate(125deg)}.ang27 {transform: rotate(130deg)}.ang28 {transform: rotate(135deg)}.ang29 {transform: rotate(140deg)}.ang30 {transform: rotate(145deg)}.ang31 {transform: rotate(150deg)}.ang32 {transform: rotate(155deg)}.ang33 {transform: rotate(160deg)}.ang34 {transform: rotate(165deg)}.ang35 {transform: rotate(170deg)}.ang36 {transform: rotate(175deg)}.ang37 {transform: rotate(180deg)}.ang38 {transform: rotate(185deg)}.ang39 {transform: rotate(190deg)}.ang40 {transform: rotate(195deg)}.ang41 {transform: rotate(200deg)}.ang42 {transform: rotate(205deg)}.ang43 {transform: rotate(210deg)}.ang44 {transform: rotate(215deg)}.ang45 {transform: rotate(220deg)}.ang46 {transform: rotate(225deg)}.ang47 {transform: rotate(230deg)}.ang48 {transform: rotate(235deg)}.ang49 {transform: rotate(240deg)}.ang50 {transform: rotate(245deg)}.ang51 {transform: rotate(250deg)}.ang52 {transform: rotate(255deg)}.ang53 {transform: rotate(260deg)}.ang54 {transform: rotate(265deg)}.ang55 {transform: rotate(270deg)}.ang56 {transform: rotate(275deg)}.ang57 {transform: rotate(280deg)}.ang58 {transform: rotate(285deg)}.ang59 {transform: rotate(290deg)}.ang60 {transform: rotate(295deg)}.ang61 {transform: rotate(300deg)}.ang62 {transform: rotate(305deg)}.ang63 {transform: rotate(310deg)}.ang64 {transform: rotate(315deg)}.ang65 {transform: rotate(320deg)}.ang66 {transform: rotate(325deg)}.ang67 {transform: rotate(330deg)}.ang68 {transform: rotate(335deg)}.ang69 {transform: rotate(340deg)}.ang70 {transform: rotate(345deg)}.ang71 {transform: rotate(350deg)}.ang72 {transform: rotate(355deg)} @@ -274,6 +303,10 @@ export class FanXiaomiCard extends LitElement { .state.show{ display: block; } + mwc-slider.hidden{ + display: block; + left: 100%; + } @-webkit-keyframes circle_right{ 0%{ -webkit-transform: rotate(-135deg); @@ -342,6 +375,22 @@ export class FanXiaomiCard extends LitElement { const target = e.target; clearTimeout(this._timer1) clearTimeout(this._timer2) + clearTimeout(this._timer3) + } + _changDelay(e){ + + const target = e.target; + let attr = this.hass.states[this.config.entity].attributes + attr['delay_off_countdown'] = "^_^" + this.hass.callService('fan', 'xiaomi_miio_set_delay_off', { + entity_id: this.config.entity, + delay_off_countdown: target.value + }) + this._timer3 = setTimeout(() => { + target.classList.add("hidden") + },1500) + this._timer1 = setTimeout(() => {this.over=false},5000) + } _changAngle(e){ // clearTimeout(this._timer2); @@ -383,7 +432,7 @@ export class FanXiaomiCard extends LitElement { entity_id: this.config.entity }); }else if(target.cmd == "natural_speed" && state=="on"){ - this.hass.callService('fan', attr['natural_speed']?"xiaomi_miio_set_natural_mode_off":"xiaomi_miio_set_natural_mode_on", { + this.hass.callService('fan', attr['natural_speed'] || attr['mode']==='nature'?"xiaomi_miio_set_natural_mode_off":"xiaomi_miio_set_natural_mode_on", { entity_id: this.config.entity }); }else if(target.cmd == "lock"){ @@ -403,9 +452,9 @@ export class FanXiaomiCard extends LitElement { }else if(target.cmd == "oscillate"){ clearTimeout(this._timer2); if(attr['oscillate']){ - target.parentNode.nextElementSibling.classList.remove("hidden") + target.parentNode.parentNode.querySelector("#angleslider").classList.remove("hidden") this._timer2 = setTimeout(() => { - target.parentNode.nextElementSibling.classList.add("hidden") + target.parentNode.parentNode.querySelector("#angleslider").classList.add("hidden") },5000) }else{ this.hass.callService('fan', 'oscillate', { @@ -414,6 +463,12 @@ export class FanXiaomiCard extends LitElement { }); target.classList.remove("hidden") } + }else if(target.cmd == "delay"){ + clearTimeout(this._timer3); + target.parentNode.parentNode.querySelector("#delayslider").classList.remove("hidden") + this._timer2 = setTimeout(() => { + target.parentNode.parentNode.querySelector("#delayslider").classList.add("hidden") + },5000) }else if(target.cmd == "more"){ this.fire('hass-more-info', { entityId: this.config.entity }); }