diff --git a/01.gif b/01.gif deleted file mode 100644 index 6ded988..0000000 Binary files a/01.gif and /dev/null differ diff --git a/02.jpg b/02.jpg index 9e51826..d006426 100644 Binary files a/02.jpg and b/02.jpg differ diff --git a/0529.gif b/0529.gif deleted file mode 100644 index 39bb321..0000000 Binary files a/0529.gif and /dev/null differ diff --git a/README.md b/README.md index 160a38c..297bbdd 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ * @Description : * @Date : 2019-10-13 17:46:58 * @LastEditors : fineemb - * @LastEditTime : 2020-07-28 23:54:57 + * @LastEditTime : 2020-07-30 18:03:05 --> # Xiaomi Fan Lovelace Card [![hacs_badge](https://img.shields.io/badge/HACS-Default-orange.svg)](https://github.com/custom-components/hacs) @@ -15,11 +15,17 @@ Xiaomi Smartmi Fan Lovelace card for HASS/Home Assistant. + This card plug-in is based on CSS implementation and is used for HASS, Supports [HACS](https://github.com/custom-components/hacs) installation + CSS fan blade and oscillation animation ## Preview -![](02.gif) +![](02.gif) + +![](02.jpg) ## Requirements [Xiaomi Mi Smart Pedestal Fan Integration](https://github.com/syssi/xiaomi_fan) ## Update +### v1.2.2 + - Swing angle UI display + - Add aspect-ratio configuration + - Add background color configuration ### v1.2.1 - Fix the problem of speed information out of sync. - Add sway angle interaction. diff --git a/fan-xiaomi.js b/fan-xiaomi.js index be68b25..ddfadba 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-07-28 19:10:09 + * @LastEditTime : 2020-07-30 15:58:52 */ -console.info("%c Xiaomi Fan Card \n%c Version 1.2.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.2.2 ", "color: orange; font-weight: bold; background: black", "color: white; font-weight: bold; background: dimgray"); const LitElement = Object.getPrototypeOf( customElements.get("ha-panel-lovelace") @@ -25,7 +25,9 @@ class FanXiaomi extends HTMLElement { } static getStubConfig() { return {name: 'Fan', - entity: ''} + entity: '', + aspect_ratio: '1', + background_color:''} } set hass(hass) { this._hass = hass; @@ -114,6 +116,8 @@ class FanXiaomi extends HTMLElement { entity_id: entityId, angle: new_angle }); + this.card.querySelector('.fanbox').classList.remove('oscillat','oscillat30','oscillat60','oscillat90','oscillat120'); + this.card.querySelector('.fanbox').classList.add('oscillat'+new_angle) }else{ if(this.Cmd["oscillate"]){ hass.callService('fan', 'xiaomi_miio_set_oscillation_angle', { @@ -121,6 +125,8 @@ class FanXiaomi extends HTMLElement { angle: 30 }); new_angle = 30; + this.card.querySelector('.fanbox').classList.remove('oscillat','oscillat30','oscillat60','oscillat90','oscillat120'); + this.card.querySelector('.fanbox').classList.add('oscillat30') }else{ hass.callService('fan', 'oscillate', { entity_id: entityId, @@ -147,14 +153,14 @@ class FanXiaomi extends HTMLElement { ui.querySelector('#buzzer').addEventListener('click', () => this._setService(entityId,hass,'buzzer')); ui.querySelector('#bnatural').addEventListener('click', () => this._setService(entityId,hass,'natural_speed')); - this.querySelector('svg').addEventListener('mousedown', (e) => this.onMouseDown(e,this),false); - this.querySelector('svg').addEventListener('touchstart', (e) => this.onMouseDown(e,this),false); + ui.querySelector('svg').addEventListener('mousedown', (e) => this.onMouseDown(e,this),false); + ui.querySelector('svg').addEventListener('touchstart', (e) => this.onMouseDown(e,this),false); - this.addEventListener('mouseup', (e) => this.onMouseUp(e,this),false); - this.addEventListener('touchend', (e) => this.onMouseUp(e,this),false); + ui.addEventListener('mouseup', (e) => this.onMouseUp(e,this),false); + ui.addEventListener('touchend', (e) => this.onMouseUp(e,this),false); - this.addEventListener('mousemove', (e) => this.onMouseMove(e,this),{passive: false}); - this.addEventListener('touchmove', (e) => this.onMouseMove(e,this),{passive: false}); + ui.addEventListener('mousemove', (e) => this.onMouseMove(e,this),{passive: false}); + ui.addEventListener('touchmove', (e) => this.onMouseMove(e,this),{passive: false}); } if(state.state==="unavailable"){ @@ -164,7 +170,7 @@ class FanXiaomi extends HTMLElement { this.card.querySelector('.ellipsis').textContent = myname+'(离线)'; this.card.querySelector('.fanbox').classList.remove('active'); this.card.querySelector('#fan').classList.remove('active'); - this.card.querySelector('.fanbox').classList.remove('oscillat'); + this.card.querySelector('.fanbox').classList.remove('oscillat','oscillat30','oscillat60','oscillat90','oscillat120'); }else{ //在线 const attrs = state.attributes; @@ -177,7 +183,7 @@ class FanXiaomi extends HTMLElement { this.card.querySelector('.fanbox').classList.add('active') this.card.querySelector('#fan').classList.add('active') this.card.querySelector('.active .blades').style.animationDuration=(attrs.natural_speed?5-attrs.natural_speed/100*5+1:5-attrs.direct_speed/100*5+1)+'s'; - attrs['oscillate']?this.card.querySelector('.fanbox').classList.add('oscillat'):this.card.querySelector('.fanbox').classList.remove('oscillat'); + attrs['oscillate']?this.card.querySelector('.fanbox').classList.add('oscillat','oscillat'+this.old_angle):this.card.querySelector('.fanbox').classList.remove('oscillat'); if(attrs['natural_speed']){ this.card.querySelector('#power').classList.remove('show'); this.card.querySelector('#direct').classList.remove('show'); @@ -200,9 +206,14 @@ class FanXiaomi extends HTMLElement { attrs['buzzer']?this.card.querySelector('#buzzer').classList.add('active'):this.card.querySelector('#buzzer').classList.remove('active'); attrs['child_lock']?this.card.querySelector('#lock').classList.add('active'):this.card.querySelector('#lock').classList.remove('active'); attrs['natural_speed']?this.card.querySelector('#bnatural').classList.add('active'):this.card.querySelector('#bnatural').classList.remove('active'); - attrs['oscillate']?this.card.querySelector('#oscillate').classList.add('active'):this.card.querySelector('#oscillate').classList.remove('active'); - attrs['oscillate']?this.card.querySelector('#angle').textContent = attrs['angle']:this.card.querySelector('#angle').textContent = 0 ; - + if(attrs['oscillate']){ + this.card.querySelector('#oscillate').classList.add('active') + this.card.querySelector('#angle').textContent = attrs['angle'] + }else{ + this.card.querySelector('#oscillate').classList.remove('active'); + this.card.querySelector('.fanbox').classList.remove('oscillat','oscillat30','oscillat60','oscillat90','oscillat120'); + this.card.querySelector('#angle').textContent = 0 + } attrs['battery_charge']==='progress'?this.card.querySelector('.rightc').classList.add('battery_charge'):this.card.querySelector('.rightc').classList.remove('battery_charge'); attrs['battery_charge']==='progress'?this.card.querySelector('.leftc').classList.add('battery_charge'):this.card.querySelector('.leftc').classList.remove('battery_charge'); if(attrs['battery']){ @@ -347,11 +358,13 @@ getUI() {
@@ -655,12 +693,25 @@ export class FanXiaomiCardEditor extends LitElement { +
+ + + + + + +
- +
@@ -670,38 +721,56 @@ export class FanXiaomiCardEditor extends LitElement { ` } + static get styles() { + return css ` + a{ + color: var(--accent-color); + } + .side-by-side { + display: flex; + align-items: flex-end; + flex-wrap: wrap; + } + .side-by-side > * { + flex: 1; + padding-right: 4px; + } + .info > * { + flex: none; + width: calc(33% - 10px); + padding: 0 5px; + } + + ha-switch{ + margin-right: 10px; + } + ha-icon-button{ + --mdc-icon-button-size: 24px; + } + .fs{ + flex:0.3; + } + ` + } _focusEntity(e){ // const target = e.target; e.target.value = '' } - _titleChanged(e){ + _valueChanged(e){ const target = e.target; if (!this.config || !this.hass || !target ) { return; } - - if(target.configValue == "title"){ - this.config = { - ...this.config, - "name": target.value - }; - } - this.configChanged(this.config) - } - _addEntity(ev){ - const target = ev.target.value; - if (!this.config || !this.hass || !this.hass.states[target]) { - return; - } - this.config = { - ...this.config, - "entity": target + let configValue = target.configValue + let newConfig = { + ...this.config }; - this.configChanged(this.config) - + newConfig[configValue] = target.value + this.configChanged(newConfig) } + configChanged(newConfig) { const event = new Event("config-changed", { bubbles: true, @@ -715,7 +784,7 @@ customElements.define("fan-xiaomi-card-editor", FanXiaomiCardEditor); window.customCards = window.customCards || []; window.customCards.push({ type: "fan-xiaomi", - name: "电风扇", + name: "Xiaomi Fan Lovelace Card", preview: true, // Optional - defaults to false description: "小米电风扇卡片" // Optional }); \ No newline at end of file