berrywhite96 / lovelace-shutter-row Goto Github PK
View Code? Open in Web Editor NEWHome Assistant Lovelace Shutter Row Card
License: MIT License
Home Assistant Lovelace Shutter Row Card
License: MIT License
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:
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:
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:
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.
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
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?
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.
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...
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?
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)
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)
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.
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.
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
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.
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
In previous version you could stop the blinds in movement, now the stop button is grayed out and not functional.
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
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
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".
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
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:
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'
Just a minor point but in the ReadMe, in the Manual installation section, all the references are to vacuum-card.js rather than shutter-row.js
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
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,
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
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.
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>
`;
};
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.
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:
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
Your comments would be most appreciated.
Thank you
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.