Custom UI with Buttons - Fan Control

Feature Requests
55

I’ve made a custom button for my TV Volume if anyone is interested… I have the custom ui in one file and its very simple. Big thanks to @Airpal and @kylerw for their inital examples!

It looks like this.
image

And

This is the code which is in a file called ‘state-card-custom_volume.html’

<dom-module id="state-card-custom_volume">
  <template>
    <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
    <style>
      :host {
        line-height: 1.5;
      }
      paper-button {
        min-width: 60px;
        background-color:#f3f3f3
      }
    </style>

<div class='horizontal justified layout'>
  <state-info state-obj="[[stateObj]]"></state-info>
  <paper-button-group>
      <paper-button on-tap="btntap2" on-down="btndown2" on-up="btnup2"><svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="#848484" d="M3,9H7L12,4V20L7,15H3V9M14,11H22V13H14V11Z" /></svg></paper-button>
      <paper-button on-tap="btntap1" on-down="btndown1" on-up="btnup1"><svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="#848484" d="M3,9H7L12,4V20L7,15H3V9M14,11H17V8H19V11H22V13H19V16H17V13H14V11Z" /></svg></paper-button>
  </paper-button-group>
</div>
</template>
</dom-module>
<script>
        Polymer({
          is: 'state-card-custom_volume',
          properties: {
            hass: {
              type: Object,
            },
            stateObj: {
              type: Object,
            },
          },

          btndown1: function (ev) {
            this.setVol('tvvolumeup', ev);
          },
          btndown2: function (ev) {
            this.setVol('tvvolumedown', ev);
          },

          btnup1: function (ev) {
            this.setVol('tvvolumeup', ev);
          },
          btnup2: function (ev) {
            this.setVol('tvvolumedown', ev);
          },





          btntap1: function (ev) {
            this.setVol('tvvolumeup', ev);
          },
          btntap2: function (ev) {
            this.setVol('tvvolumedown', ev);
          },

          setVol(vol,ev) {
            var serviceData = {entity_id:('script.'+vol)};
            this.hass.callService('script', 'turn_on', serviceData);
            ev.stopPropagation();
  },

});
</script>

I have the actions calling a script I made in Hassio’s editor is its really easy to edit.
Some of you will see I have left in hooks for button press and release… I am currently working on a way to have the script repeat as you hold the button down. But I haven’t managed it yet… If anyone has any suggestions I’d love to hear!

In regards to responsiveness. Its ok. It only breaks when the card is less than 320px. Which for me is when the cards go to a 4 column layout.

7 Likes