All in one Fan Card

[sildehoop]

I have made a Fan Card and Fan Slider Card with temperature and humidity label.

To do:

• Merge fan slider
• Merge fan slider horizontal
• Merge fan collapse
• Merge fan oscillate

[CM000n]

Wow, thank you very much @sildehoop! Excuse my ignorance, but what are the specific advantages over the fan card from @saxel?
https://github.com/UI-Lovelace-Minimalist/UI/tree/main/custom_cards/custom_card_saxel_fan
Just the slightly different design and the temperature display? Maybe we could combine your two cards to avoid redundancy?

[sildehoop]

The fan card from @saxel? is not working form me and I don't need the oscillate future and you cannot turn it off with thad card.

[sildehoop]

But wil look if I can make all the fan card versions

• fan card (with toggeleble show temp en hum) and (with toggeleble oscillate future)
• fan slider card (with toggeleble show temp en hum) and (with toggeleble oscillate future)
• fan slider collapsable card (with toggeleble show temp en hum) and (with toggeleble oscillate future)

[sildehoop]

Or do jou also want to combine collapsable and slider like fan card from @saxel?

- type: custom:button-card
  template: custom_card_saxel_fan_blue
  entity: fan.smart_fan
  name: Fan
  variables:
    collapsable: false
    oscillate_attribute: oscillate

[sildehoop]

But maybe the variables is getting a bit too much then

[sildehoop]

In one card

  variables:
    collapsable: false
    show_oscillate: false
    oscillate_attribute:  "YOUR_OSCILLATE_ATTRIBUTE"
    show_attributes: false
    always_show_attributes: false
    ulm_card_fan_slider_name: "YOUR_NAME"
    ulm_card_fan_slider_temp_attribute: "YOUR_TEMP_ATTRIBUTE"
    ulm_card_fan_slider_hum_attribute: "YOUR_HUM_ATTRIBUTE"

[saxel]

Weird I don't have any problems with my custom fan card even with the latest update on the dev branch. Curious to know why it wouldn't work for you? Solution is not to create another card 😛I didn't think there were smart fans that also didn't have the possibility to toggle oscillating function hence I didn't make it configurable.

But if you don't need the button for oscillating then it sounds like you could just inherit from the card_light_slider and just change the name/label?

[sildehoop]

That is also not the main reason😛 and yes I took the card_light_slider and modified it thought maybe someone els want to use it like I do so made an pr

[CM000n]

Perhaps you can join forces here to revise the existing card accordingly? The end-user configuration could maxbe be a little slimmed down by making some variables optional and not have to specify?

Do not get me wrong @sildehoop. I think your work is great and I appreciate it. But for my perception your cards, at least at first sight, look too similar. This may also confuse the end user when we eventually have x fan cards. 😀

Or what is your general opinion on this?

[sildehoop]

Yes I am withe you to make it as simple as possible for the end user, I will make designs for al the options we have now and communicate with @saxel if he wants to join forces 😀

[sildehoop]

And a question for you what you think is the best keep them separated like the light card or join all options

[sildehoop]

I think these are all the options

[sildehoop]

maybe??

[saxel]

Happy to work together, I just don't know how best to deal with the card_light_slider if we don't have the oscillate button. Then it would in practice be two cards that could behave the same way. Should the card_light_slider base template be a bit more generic and allow for more configuration?

The inclusion of horizontal button is a good addition 👍
The oscillate button should have the same color theme as the slider/icon.
Personally I also really dig my blue card so it would be nice if we can keep that, and it also follows the 7ahang's theme.

Also, this is my personal preference but I don't think I would want to see the humidity as an extra attribute on the same card even though my fan offers this attribute. Personally I don't see the need to display this which will also keep the dashboard extra clean. So as long as that can be easily configurable then I'm good 😀

[sildehoop]

Nice, I had previously suggested to make the cards more configurable #105 and still don't now wat is the best solution.

These are just Figma Mockups so no hard dissections on the color (like your blue better too)😄

https://www.figma.com/file/dOQKR8DCP2mvH7zesjU8L6/UI-Lovelace-Minimalist?node-id=0%3A1

In Figma you also see thad I have some base designs were I work from

[sildehoop]

Ohh and I did use the colours of 7ahang's so don't now way they look so different

Edit: oh I know you used the colors form his first design.
First: https://www.behance.net/gallery/73601915/Smart-Home-Concept-Application
Redesign: https://www.behance.net/gallery/88433905/Redesign-Smart-Home

Both: https://www.figma.com/file/dOQKR8DCP2mvH7zesjU8L6/UI-Lovelace-Minimalist?node-id=42%3A295

[sildehoop]

I made my color pallet from the new colors

[saxel]

@sildehoop regarding the issue you had with the blue card: See #156 where there was a bug introduced with the pre-commit hook changes. I didn't notice it before because I hadn't updated my own custom card 😆

[CM000n]

Oops, something went wrong here. I accidentally deleted the dev branch. But wait vll still with a new PR. Maybe we move the repo this week

[mekenthompson]

Will this support fans with only several set speeds; low, medium, high vs ones with a percentage?

[sildehoop]

Maybe we can do both

[mekenthompson]

@sildehoop here's attributes of an example fan I have, controlled via RF through Broadlink. Could use "speed_list" attribute to populate available steps and names?:

speed_list: off, low, medium, high
preset_modes: null
speed: off
percentage: 0
percentage_step: 33.333333333333336
preset_mode: null
last_on_speed: high
device_code: 1140
manufacturer: Lucci Air
supported_models: Tahitian
supported_controller: Broadlink
commands_encoding: Base64
friendly_name: Living Room Fan
supported_features: 1

[TheZoker]

Just out of curiosity: Is there any reason, why this does not become a 'core' card instead of a custom card?
I'm not familiar with how this works in this repo, but I would expect this card to be in the core 🤔

Btw: Card looks amazing!

[sildehoop]

If this is ready it will be a core component😄

[sildehoop]

I don't have a lot of time so have not been working on it recently.

[cyber-junkie9]

Is there any update on this ?
My fan's don't have oscillate functionality

[sildehoop]

No sorry I started it but don't have time to finish it.

[V4n1X]

I am super excited when this card is finished, i use the WIP actually.

[rossco555]

This is something I've put together for my own purposes, if anything may be useful.

---
custom_card_rg_fan:
  template:
    - "custom_card_rg_fan_common"
  state:
    - value: 'on'
      styles:
        icon:
          - color: "rgba(var(--color-green),1)"
        img_cell:
          - background-color: "rgba(var(--color-green), 0.2)"
  # size: 60%
  styles:
    name:
      - font-weight: 500
  variables:
    mainSliderColor: "rgba(var(--color-green),1)"
    secondarySliderColor: "rgba(var(--color-green),0.2)"
  custom_fields:
    button:
      card:
        card:
          template:
            - "[[[ return entity.attributes.direction == 'forward' ? 'blue_on' : 'red_on']]]"

# Common template, don't use
custom_card_rg_fan_common:
  variables:
    collapsible: true
    mainSliderColor:
    secondarySliderColor:
  template:
    - "ulm_translation_engine"
    - "icon_info_bg"
  hold_action:
    action: "more-info"
  label: >-
    [[[
      var label = variables.ulm_translation_state
        if (entity.attributes.percentage != null && entity.state === 'on'){
          var pc = Math.round(entity.attributes.percentage);
          var label = (pc ? pc : "0") + "%";
        }
      return label;
    ]]]
  styles:
    grid:
      - grid-template-areas: "'i n n' 'i l l' 'slider slider button'"
      - grid-template-columns: "min-content 4fr 1fr"
      - grid-template-rows: "min-content min-content min-content"
    custom_fields:
      slider:
        - margin-top: |-
            [[[
              if (!variables.collapsible) {
                return "12px";
              } else {
                return entity.state === "on" ? "12px" : "0px";
              }
            ]]]
      button:
        - margin: |-
            [[[
              if (!variables.collapsible) {
                return "12px 0px 0px 12px";
              } else {
                return entity.state === "on" ? "12px 0px 0px 12px" : "0px";
              }
            ]]]
  custom_fields:
    slider:
      card:
        type: "conditional"
        conditions:
          - entity: "[[[ return entity.entity_id ]]]"
            state: "[[[ return variables.collapsible ? 'on' : entity.state; ]]]"
        card:
          type: "custom:my-slider"
          entity: "[[[ return entity.entity_id ]]]"
          step: "[[[ return typeof states[entity.entity_id].attributes.percentage_step === 'undefined' ? 1 : parseInt(states[entity.entity_id].attributes.percentage_step); ]]]"
          radius: "14px"
          height: "42px"
          mainSliderColor: "[[[return variables.mainSliderColor]]]"
          secondarySliderColor: "[[[return variables.secondarySliderColor]]]"
          mainSliderColorOff: "rgba(var(--color-theme),0.05)"
          secondarySliderColorOff: "rgba(var(--color-theme),0.05)"
          thumbHorizontalPadding: "0px"
          thumbVerticalPadding: "0px"
          thumbWidth: "0px"
          card_mod:
            style: |-
              ha-card {
                box-shadow: none;
                border-radius: 14px;
                background-color: #3d5afe02;
              }
    button:
      card:
        type: "conditional"
        conditions:
          - entity: "[[[ return entity.entity_id ]]]"
            state: "[[[ return variables.collapsible ? 'on' : entity.state; ]]]"
        card:
          type: "custom:button-card"
          icon: "[[[ return entity.attributes.direction == 'forward' ? 'mdi:emoticon-cool' : 'mdi:emoticon-devil' ]]]"
          entity: "[[[ return entity.entity_id ]]]"
          tap_action:
            action: "call-service"
            service: "fan.set_direction"
            service_data:
              entity_id: "[[[ return entity.entity_id; ]]]"
              direction: "[[[ return entity.attributes.direction == 'forward' ? 'reverse' : 'forward' ]]]"
          template:
            - "widget_icon"
          state:
            - value: off
              styles:
                icon:
                  - color: "rgba(var(--color-theme),0.2)"

[benbur98]

Propose closing this PR without merging. Outdated and any further updates can be done on new Fan Card in PR #1194
Big fan of @rossco555 Buttons but I can see no good way to make this adaptable for all users.