Flash push button icon on events. (#1443)

Fixes #1442
WebThingsIO · Oct 24, 2018 · 5ecebba · 5ecebba
1 parent bc94e85
commit 5ecebba
Show file tree

Hide file tree

Showing 2 changed files with 114 additions and 0 deletions.
diff --git a/static/js/components/capability/push-button.js b/static/js/components/capability/push-button.js
@@ -66,6 +66,8 @@ class PushButtonCapability extends BaseComponent {
     this._label = this.shadowRoot.querySelector('#label');
 
     this._pushed = false;
+    this._pressTimeout = null;
+    this.addEventListener('press', this._onPress.bind(this));
   }
 
   connectedCallback() {
@@ -91,6 +93,65 @@ class PushButtonCapability extends BaseComponent {
       this._label.innerText = 'NOT PUSHED';
     }
   }
+
+  _onPress(e) {
+    switch (e.detail) {
+      case 'single':
+        this._fireSinglePress();
+        break;
+      case 'double':
+        this._fireDoublePress();
+        break;
+      case 'long':
+        this._fireLongPress();
+        break;
+    }
+  }
+
+  _fireSinglePress() {
+    if (this._pressTimeout !== null) {
+      clearTimeout(this._pressTimeout);
+      this._pressTimeout = null;
+    }
+
+    this.pushed = true;
+    this._pressTimeout = setTimeout(() => {
+      this.pushed = false;
+      this._pressTimeout = null;
+    }, 300);
+  }
+
+  _fireDoublePress() {
+    if (this._pressTimeout !== null) {
+      clearTimeout(this._pressTimeout);
+      this._pressTimeout = null;
+    }
+
+    this.pushed = true;
+    this._pressTimeout = setTimeout(() => {
+      this.pushed = false;
+      this._pressTimeout = setTimeout(() => {
+        this.pushed = true;
+        this._pressTimeout = setTimeout(() => {
+          this.pushed = false;
+          this._pressTimeout = null;
+        }, 300);
+      }, 300);
+    }, 300);
+  }
+
+  _fireLongPress() {
+    if (this._pressTimeout !== null) {
+      clearTimeout(this._pressTimeout);
+      this._pressTimeout = null;
+    }
+
+    this.pushed = true;
+    this._pressTimeout = setTimeout(() => {
+      this.pushed = false;
+      this._pressTimeout = null;
+    }, 1500);
+  }
 }
 
 window.customElements.define('webthing-push-button-capability',

diff --git a/static/js/push-button.js b/static/js/push-button.js
@@ -28,6 +28,38 @@ class PushButton extends Thing {
         baseIcon: '/optimized-images/thing-icons/push_button.svg',
       }
     );
+
+    this.pressedEventName = null;
+    this.doublePressedEventName = null;
+    this.longPressedEventName = null;
+
+    if (description.events) {
+      for (const name in description.events) {
+        switch (description.events[name]['@type']) {
+          case 'PressedEvent':
+            if (this.pressedEventName === null) {
+              this.pressedEventName = name;
+            }
+            break;
+          case 'DoublePressedEvent':
+            if (this.doublePressedEventName === null) {
+              this.doublePressedEventName = name;
+            }
+            break;
+          case 'LongPressedEvent':
+            if (this.longPressedEventName === null) {
+              this.longPressedEventName = name;
+            }
+            break;
+        }
+      }
+    }
+
+    // findProperties gets called as part of super(), so this.pushedProperty
+    // will already be defined at this point.
+    if (!this.pushedProperty) {
+      this.icon.pushed = false;
+    }
   }
 
   /**
@@ -68,6 +100,27 @@ class PushButton extends Thing {
     }
   }
 
+  /**
+   * Handle an 'event' message.
+   *
+   * @param {Object} data - Event data
+   */
+  onEvent(data) {
+    super.onEvent(data);
+
+    if (!this.pushedProperty) {
+      for (const name in data) {
+        if (name === this.pressedEventName) {
+          this.icon.dispatchEvent(new CustomEvent('press', {detail: 'single'}));
+        } else if (name === this.doublePressedEventName) {
+          this.icon.dispatchEvent(new CustomEvent('press', {detail: 'double'}));
+        } else if (name === this.longPressedEventName) {
+          this.icon.dispatchEvent(new CustomEvent('press', {detail: 'long'}));
+        }
+      }
+    }
+  }
+
   iconView() {
     return `
       <webthing-push-button-capability>