Custom UI with Buttons - Fan Control

GeorgeIoak · February 21, 2018, 9:55pm

So I’m still trying to digest all of this and have made a little progress. I have an input_select with the 3 speeds plus OFF and selecting one of the options calls an automation (automation.afs_medium_speed). Now I need to edit Kyle’s code to work with my configuration.

I have the 3 files that Kyle started with (fan-model.html, state-card-with-speed.html, and state-card-custom_fan.html). Am I getting close to what I want by making these changes?

fan-model.html -->

change:
computeEntityObj: function (hass, stateObj) { return new window.FanEntity(hass, stateObj); },
to:
computeEntityObj: function (hass, stateObj) { return new window.input_select.Entity(hass, stateObj); },

state-card-with-speed.html -->

change:
onMedTap: function (ev) { this.entityObj.setSpeed('medium', ev); },
to:
???

state-card-custom_fan.html – No changes required?

CloudHoang · March 2, 2018, 4:05am

Great work!!!
Can you share this custom card?

AnthonyB · March 9, 2018, 7:09am

Awesome.Can you please share the code?

travis · March 25, 2018, 2:57am

Yesterday I updated to the latest Home Assistant to 0.65.6 and noticed that the on, off buttons that I created start to pop-up the detail page whenever it is clicked. This does not happened prior to the update because “ev.stopPropagation();” is used as advised.

How do I now stop that pop-up from appearing? For example if I press Storeroom Light “ON”, the detail page will appear. I will need to close it in order to go back to the main.

>>>

john1 · March 29, 2018, 5:16pm

Same issue here. Did you find a fix?

CloudHoang · March 30, 2018, 7:02am

Hi @travis
Can you share the celling fan template…
I looking this for a while and I really love this

travis · March 30, 2018, 9:10am

@CloudHoang the state-card-custom html I used for the 3 buttons.

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

<div class='horizontal justified layout'>
  <state-info state-obj="[[stateObj]]"></state-info>
  <paper-button-group>
      <paper-button on-tap="btnlow">L</svg></paper-button>
      <paper-button on-tap="btnmed">M</svg></paper-button>
      <paper-button on-tap="btnhigh">H</svg></paper-button>
  </paper-button-group>
</div>
</template>
</dom-module>
<script>
        Polymer({
          is: 'state-card-custom_fan1',
          properties: {
            hass: {
              type: Object,
            },
            stateObj: {
              type: Object,
            },
          },

          btnlow: function (ev) {
            this.setVol('fan_speed_low', ev);
          },
          btnmed: function (ev) {
            this.setVol('fan_speed_med', ev);
          },
          btnhigh: function (ev) {
            this.setVol('fan_speed_high', ev);
          },

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

});
</script>

travis · March 30, 2018, 9:14am

Nope…still finding the fix.

juan11perez · March 30, 2018, 3:02pm

@travis
apparently a bug

john1 · March 30, 2018, 3:38pm

@travis @juan11perez I fixed this by replacing on-tap with on-click

juan11perez · March 30, 2018, 4:33pm

great
many thanks John

travis · March 31, 2018, 9:47am

Its gone!..Thanks

CloudHoang · March 31, 2018, 5:21pm

@travis
thanks for you script but I dont know much about the custom state card
can you help me edit a bit??

I have a RF fan with 1 command to change from Low => Medium => High => Low … so I make a script to switch a fan speed something like

If current is low, change to high =>> send 2 command.
If current is Medium, change to high =>> send 1 command.

How can I map those script to the html card?
Really thanks and feel free if you can help.

juan11perez · April 3, 2018, 1:30pm

Good day, anyone can advise on how to insert a picture onto the paper-button

<paper-button ###image### on-click=“btntap1”>Ø

thank you

Prathik_Gopal · May 18, 2018, 9:05am

i’ve got the same question, i have a remote which has one button to go from low-med-high on successive hits. Any solution to this is greatly appreciated. thanks in advance.

localhoster · June 15, 2018, 1:40pm

Hi, i have added a picture like this:

<paper-button style='background-color:#ff0000;background-image: url("/local/your-image.png");' on-tap="btntst">Test button!</paper-button>

The *.png file must be placed in ~/.homeassistant/www

juan11perez · June 15, 2018, 3:52pm

thank you for your help

undertoe · June 21, 2018, 4:51pm

Did you ever get the custom state card fan speed control working?

If so could you share your steps and configuration?

undertoe · June 21, 2018, 8:28pm

Actually couldn’t follow this long thread and get something working so i came up with my own. This is working and super easy to get setup. Let me know how easy my instructions are to setup.

schmittx · June 26, 2018, 11:43am

@undertoe I used your code as a template to make a custom card for alarm_control_panel. I want to add a second line under the entity name like @jamesdawson3 alarm_control_panel above to show current status. Can either of you guys, or @andrey, give me any advice?

<dom-module id="state-card-custom-alarm_control_panel">
  <template>
    <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
    <style>
      :host {
        line-height: 1.5;
      }
      paper-button {
        float: left !important;
        font-size: 12px !important;
        height: 30px;
        margin: 3px;
        min-width: 75px;
      }
    </style>
    <div class='horizontal justified layout'>
      <state-info state-obj="[[stateObj]]"></state-info>
      <paper-button-group>
        <paper-button raised on-click='handleDisarmTap' hidden$='[[!disarmBtnVisible]]'>Disarm</paper-button>
        <paper-button raised on-click='handleAwayTap' hidden$='[[!awayBtnVisible]]'>Away</paper-button>
        <paper-button raised on-click='handleHomeTap' hidden$='[[!homeBtnVisible]]'>Home</paper-button>
        <paper-button raised on-click='handleNightTap' hidden$='[[!nightBtnVisible]]'>Night</paper-button>
      </paper-button-group>
    </div>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'state-card-custom-alarm_control_panel',
    properties: {
      hass: {
        type: Object,
      },
      stateObj: {
        type: Object,
        observer: 'stateObjChanged',
      },
      statusValue: {
        type: String,
        value: 'Unknown',
      },
      disarmBtnVisible: {
        type: Boolean,
        value: false,
      },
      awayBtnVisible: {
        type: Boolean,
        value: false,
      },
      homeBtnVisible: {
        type: Boolean,
        value: false,
      },
      nightBtnVisible: {
        type: Boolean,
        value: false,
      },
    },
    stateObjChanged: function (newVal) {
      if (newVal) {
        if (newVal.state == 'disarmed') {
          this.statusValue = 'Disarmed';
          this.disarmBtnVisible = false;
          this.awayBtnVisible = true;
          this.homeBtnVisible = true;
          this.nightBtnVisible = true;
          this.updateStyles({'--status-text-color': 'gray'});
        } else if (newVal.state == 'armed_away') {
          this.statusValue = 'Armed Away';
          this.disarmBtnVisible = true;
          this.awayBtnVisible = false;
          this.homeBtnVisible = false;
          this.nightBtnVisible = false;
          this.updateStyles({'--status-text-color': 'gray'});
        } else if (newVal.state == 'armed_home') {
          this.statusValue = 'Armed Home';
          this.disarmBtnVisible = true;
          this.awayBtnVisible = false;
          this.homeBtnVisible = false;
          this.nightBtnVisible = false;
          this.updateStyles({'--status-text-color': 'gray'});
        } else if (newVal.state == 'armed_night') {
          this.statusValue = 'Armed Night';
          this.disarmBtnVisible = true;
          this.awayBtnVisible = false;
          this.homeBtnVisible = false;
          this.nightBtnVisible = false;
          this.updateStyles({'--status-text-color': 'gray'});
        }              
      }
    },
    handleDisarmTap: function (ev) {
      this.setState(ev, 'alarm_disarm');
    },
    handleAwayTap: function (ev) {
      this.setState(ev, 'alarm_arm_away');
    },
    handleHomeTap: function (ev) {
      this.setState(ev, 'alarm_arm_home');
    },
    handleNightTap: function (ev) {
      this.setState(ev, 'alarm_arm_night');
    },
    setState: function (ev, service) {
      var serviceData = {entity_id: this.stateObj.entity_id};
      this.hass.callService('alarm_control_panel', service, serviceData);
      ev.stopPropagation();
    },
  });
</script>