Coder Social home page Coder Social logo

berrywhite96 / lovelace-shutter-row Goto Github PK

View Code? Open in Web Editor NEW
21.0 2.0 4.0 385 KB

Home Assistant Lovelace Shutter Row Card

License: MIT License

JavaScript 97.66% CSS 2.34%
home-assistant home-assistant-card home-assistant-custom lovelace-card lovelace-ui

lovelace-shutter-row's People

Contributors

berrywhite96 avatar maorcc avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

lovelace-shutter-row's Issues

Improvements?

  1. I'm used to the HA default cover card which includes an UP and DOWN arrow. Your card displays a circumflex symbol (and one upside-down) which is much smaller to press on small smartphone. This is less handy for me and is holding me back for now.
    I myself would prefer the default UP and DOWN arrow or an equivalent.
    Picture:
    pic1

  2. I also noticed that your card does not have a on mouse hover action like the default HA cover card has.
    (It doesn't color the background of the hovered item and no popup is shown.
    Picture:
    pic2

  3. With the default HA cover card you get an UP or DOWN arrow while the cover is running. This arrow indicates in which direction the cover is currently running. I'm missing this feature in your card?
    Picture:
    pic3
    pic4

Finally: I wonder if you would be interested in supporting these ( https://github.com/queimadus/cover-icon-element ) icons?
They included an UP/DOWN arrow (see point 3 above) and they also have 5 different icons which should be shown depending on the current position of the cover.

Feature Request

Hi,

Is it possible to add text besides de value. Now it says 70%. I use my shutters on a ventilation postition, and it says that 12%, and it should be nice to set there 12% Open. So it should be nice to add Open besides that value

regards Richard

Extra padding

Any idea why there's extra padding for this card specifically?
image

Improvement suggestions

Great project! HA is really missing a good Cover/Shutter card!

Couple suggestions:

  • Add option to enable/disable the slide bar
  • Add option to make it nested inside other cards, like Entities card:
    image

Adding Multiple in one card

Hey, first of all thanks for creating this card - love it...
I looked into card mod to make the padding etc. smaller, but what I would love to have is to add multiple shutters to one card, that they are all listing below and like we have for switches, that it would be possible to close / open all shutters within one card, would that be possible?

Feature request: Allow hiding the stop button

Some blinds (like mine) don't support stopping through Home Assistant. In this case, it would be great to be able to hide the button for it, and maybe even move the up and down buttons closer together.

Slider position slider no longer working correctly in newer HA systems

Normally when you start sliding the slider, to change the cover position, it will show the position before you let lose your mouse (or finger in case of touch screen). This is no longer happening since on of the previous HA updates. It's an issue I'm facing for a couple months already.

Hasn't anyone noticed this before? Or didn't anyone care about it?

Because of this issue it's no longer possible to set my covers to for example 75% from the first try. I have to estimate where 75% is and adjust multiple times...

YAML code

Hi,
I dont get this card working completely.
The buttons (up, down and stop) are working fine, but the preset button doesn't work.
This is the card example code:

type: "custom:shutter-row"
entity: cover.cover_entity
name: Friendly name
invert_position: true
state_color: true
preset_buttons:
- name: Open
icon: mdi:window-shutter-open
tap_action:
action: call-service
service: cover.set_cover_position
data:
entity_id: cover.cover_entity
position: 100

My entity of the shutter is called "cover.18sleepingroom"

I changed the YAML to this:

type: "custom:shutter-row"
entity: cover.18sleepingroom
name: Shutter sleepingroom
invert_position: true
state_color: true
preset_buttons:
- name: Open
icon: mdi:window-shutter-open
tap_action:
action: call-service
service: cover.set_cover_position
data:
entity_id: cover.18sleepingroom
position: 100

What is wrong? service?

Change icon of default buttons

Is it possible to change the icon of the default buttons?

I once requested this feature but my request has been closed with the message that it has been implemented in version 0.3.0.
Except that I can't find any documentation / example for this?

I do see that custom buttons were introduced but I just want to change the up/stop/down buttons to mdi:arrow-up-bold-circle-outline, mdi:stop-circle-outline and mdi:arrow-down-bold-circle-outline respectively. (in order to match other UI elements in my dashboard)

Preset buttons not working in editor

I can't add preset buttons via the editor:
Uncaught TypeError: Cannot add property preset_buttons, object is not extensible
at ShutterRowEditor._addPresetItem (shutter-row.js:495:41)
at H.handleEvent (shutter-row.js:19:7199)

When I define them in code it shows up the editor isn't working:
shutter-row.js:664 Uncaught TypeError: Cannot add property undefined, object is not extensible
at ShutterRowEditor.presetChanged (shutter-row.js:664:67)
at H.handleEvent (shutter-row.js:19:7199)
at o (fire_event.ts:76:8)
at ShadowRoot. (ha-form.ts:180:7)
at o (fire_event.ts:76:8)
at F.value (hui-action-editor.ts:190:7)
at D.handleEvent (lit-html.ts:2010:29)
at Object.notifySelected (mwc-list-base.ts:409:14)
at f.setSingleSelectionAtIndex
(mwc-list-foundation.ts:410:18)
at f.setSelectedIndex (mwc-list-foundation.ts:194:12)

state_color problem

Thank you for this great card!

The issue I've found is the next:

When I set the position of a shutter different from 0, and state_color is set to true, the icon is yellow indefinitely.
Only if position is 0 the icon returns to blue.

Rundungsfehler bei der Darstellung in der Karte

Hallo,
ich habe gestern die lovelace-shutter-row Karte entdeckt und mir ein Dashboard gebaut.
Ich finde die Karte echt cool und würde sie gerne nutzen.
Ich habe nur leider ein Darstellungsproblem, wenn die Jalousien manuell betätigt werden.
image
Wenn "jemand" so freundlich wäre die Darstellung auf der Karte so abzuändern, dass auf ganze Zahlen gerundet wird, wäre mir das ein Bunch of coffees wert :-)

Viele Grüße.
Stef

Suggestion

Hei, loving your work, this is my default card for windows for a while now.

There is one feature i would like you to implement if possible 👍

As you can see my curtains opening to different directions, my feature suggestion allows inverting the starting point of the position slider (left or right) therefore it would correctly fill the curtain position.

in my example it would mean the right window slider starts from right to left and indicates a full blue line.

image

Popup HA onclick on card

Hi team,

when I click on a card with your plugin, the popup ha is displaying.
It's possible to desactive this.
Example :
Capture d’écran 2023-09-13 à 19 38 22

Please do not hardcode the icon

Hi

Great little card

It seems you have hard coded the icon. I have a a different icon to match my actual cover. It would be good if the card just use that. We can add any icon we want to an entity so why hardcode the icon? That makes the card less useful

Pressing up/down button opens entity popup?

When I press the up/down button the entity ‘popup’ opens while the cover opens/closes. Like when you press the entity’s name in HA except that it does open/close the cover ar the same time.

How can I prevent this from happening? I just want it tonopen/close the cover but not open that popup

Rollershutter Max 99%

With my roller shutters, 100% = 99%, unfortunately there is no 100%. Consequently, I do not get the state "closed", can I change something in the script so that it displays 99% with the state "closed"? Thank you

Entity's state not updated on card while shutter is in motion

While the shutter is moving, either opening or closing, the status text does not reflect the current entity state which is either "opening" or "closing".

For example, if the shutter is closed, the card shows the word "Closed", then when open button is pressed, the card is still showing "Closed" text while the shutter is in motion. The expected status text on the card in this case should be "Opening".

Icon do's not update

I would like to use the card for my windows, shutters and blinds, but the icon is alway the same. I've changed it in the entity, everything else (normal entity card, ...) updates the icon correctly.

System:
Home Assistant 2023.3.5
Supervisor 2023.03.1
Operating System 9.5
Frontend 20230309.1 - latest

mistake

I want to use this card to control two relays. One for open a roller and the other for closing. I prescribed the data but it doesn't work for me. Where is my mistake?

`type: custom:shutter-row
name: СХОДИ
invert_position: true
state_color: true
preset_buttons:

  • name: Open
    icon: mdi:window-shutter-open
    tap_action:
    action: turn_on
    entity_id: switch.firanki_skhodi_l1
  • name: Close
    icon: mdi:window-shutter
    tap_action:
    action: turn_on
    entity_id: switch.firanki_skhodi_l2
    move_down_button: {}
    invert_position_label: true
    entity: input_button.firanka_verkhnia_skhodi
    rtl_position: false
    disable_position: true
    group: false`

Error downloading from HACS

I get next error when trying to download the card from HACS:

Logger: custom_components.hacs
Source: custom_components/hacs/repositories/base.py:836
Integration: HACS (documentation, issues)
First occurred: 16:51:07 (1 occurrences)
Last logged: 16:51:07

<Plugin berrywhite96/lovelace-shutter-row> No assets found for release 'tags/v0.1.1'

Group does not do anything in entity card

I added the group: true to a shutter row
I cannot see any difference. True or false there is still a frame around

image

  - type: custom:shutter-row
    entity: cover.cloud
    group: true
    invert_position_label: true
    state_color: true

Stop button no more working

Hey,

since one of the last updates the stop button isn’t working. He is not activated if the shutter is going up or down. The button stays greyed out. I am running with inversion mode.

best
Dirk

Switch direction of the position slider.

Hello, first of all, thank you for this lovelace.
I want to change the direction of the slider, but I have to click twice until I can see the slider change its position, then I click "Save" and nothing happens.
I can see in Yaml "rtl_position: true" but the slider does not change position.
I tried to uninstall and install again from HACS, but it doesn't work for me.
I have updated home assistant to its latest version.
What can I do?

Best regards,

Service data

When using the UI to configure an action, the default keyword used for data sent to the service is "data". It seems it should be "service_data"

I've had to update it myself in the code to have this working

Invert slider

Is it possible to add a property to invert the slider. If the state is open I would expect the slider to be on the left end of the scale. If it is closed I would expect the slider on the ride side of the scale. Currently it’s the other way around and confuses me.

Icon state color does not work at all (with fix)

Hi
The state-color: true does not work at all. There are two issues.

One is a bug in the code. You use an opening ha-svg-icon and close it with /ha-icon-button. It is the opening that is wrong.

And the other is that the css still use the now obsolete paper states. Now the state-cover-active-color and state-cover-inactive-color css names should be used for covers.

I am not a CSS or JS expert at all.

But I still managed to fix it. It is 3 lines of code changes. I am not skilled in github so please accept that I contribute a good old diff -u

--- shutter-row-before.js	2023-04-23 12:05:51.073611800 +0200
+++ shutter-row-after.js	2023-04-29 15:32:33.006417400 +0200
@@ -697,7 +697,7 @@
 ha-icon.active-icon,
 ha-icon-button.active-icon {
     color: #fdd835 !important;
-    color: var(--paper-item-icon-active-color, #fdd835) !important;
+    color: var(--state-cover-active-color, #fdd835) !important;
 }
 div.content {
     cursor: pointer;
@@ -714,7 +714,7 @@
     display: inline-block;
     text-align: center;
     color: #44739e;
-    color: var(--paper-item-icon-color, #44739e);
+    color: var(--state-cover-inactive-color, #44739e);
     width: var(--ha-icon-height);
     height: var(--ha-icon-height);
     line-height: var(--ha-icon-height);
@@ -1021,7 +1021,7 @@
         let getIconElementByPath = (path) => {
             return y`
                 <ha-svg-icon-box>
-                    <ha-svg-icon path="${path}" class="${getClassName()}"></ha-icon-button>
+                    <ha-icon-button path="${path}" class="${getClassName()}"></ha-icon-button>
                 </ha-svg-icon-box>
             `;
         };

Preset Button

Hello, the preset button is not working.
Can you help me.
Thanks :-)

button

Castom services for full open/close curtain.

Hi!
This will be a very popular card.
However, I can't fix one problem for myself with it. The fact is that my curtains are controlled only by the position tool. The standard full open/close buttons do not work. Curtains are integrated via Local Taya and probably that's why they don't work quite correctly. However, this would not be a problem if you expanded the settings of your card with the ability to assign custom services for full closure/opening.

Size of card

I recently came across your shutter-row card. It is what I have been looking for. Till now I was using a standard entity card followed by slider-entity-row like so:

type: entities
entities:
  - entity: cover.all_shutters
    secondary_info: last-changed
  - type: custom:slider-entity-row
    full_row: true
    entity: cover.all_shutters

giving:
Screenshot 2022-09-07 at 12 14 07
This works well but is more laborious to do for 15 shutters.

Now we come to your card.

I have defined the same shutter thus:

type: entities
entities:
  - type: custom:shutter-row
    entity: cover.all_shutters
state_color: true
show_header_toggle: false

or

square: false
columns: 1
type: grid
cards:
  - type: custom:shutter-row
    entity: cover.all_shutters

I have these issues

  1. Positions do not tally
  2. The height of your card is greater than the other 2 combined. This increases the overall size of the grid. How can I reduce this?
  3. Cannot get the icon to change colour with state.
    These issues are evident in the screenshot:

Screenshot 2022-09-07 at 12 36 40

Your comments would be most appreciated.

Thank you

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.