dbuit / light-popup-card Goto Github PK
View Code? Open in Web Editor NEWLovelace card to use as custom pop-up for light in homekit style
Lovelace card to use as custom pop-up for light in homekit style
Is it possible to change the colour of the slider and other elements?
It would be great to have an option to disable the icon and the percentage shown above the slider. The icon can be set to none
right now, but that still leaves an empty space and does not eliminate the corresponding HTML tag.
Grouplights that before latest update get a Button insted of a slider everytime.
And they worked fine before update. Now i had to setup displayType: slider on all my group lights in order for it to be detected as a dimmable light.
I dono if thats by design. But feels off.
Ciao!
First: GREAT WORK! I think that this card is giving a big plus to UI interaction.
I was thinking that it would be great to extend the use beyond lights.
I mean that maybe this card can be used for other entities that use a slider.
In my case I was looking to use it for a climate component. So I will have actions as set working mode of it (already possible and I got them working) and the slider to adjust the temperature.
One option could be to add optional input settings to set characteristics of sliders and service to call to set the new value. With the default value on the brightness thing that it use now.
What do you think? Could it be a possible upgrade?
Ciao
Daniele
Hi DBuit,
Awesome card! Thank you for your effort!
This may be not the best place to post a feature request, but do you think it would be possible to adjust the light-pop-up card into a segmented/stepped "iOS torch style" card to us as an adjustable stepped slider.
As is, this could be extremely useful for use as a stepped dimmer for lights, shutters or an input select integration, etc.
Would this be possible to achieve?
Would love to here from you.Thanks!
Hi,
first of all thank you for your component, I was looking for that since long...
I have a question: is it possible to place to two different slider align horizontally in one pop up-card?
I would like to have brightness and color temperature slider in one pop up-card.
Thank you
Mark
I'd like to implement this card in my setup but HACS doesn't like it.
I cannot add it manually either since the "Repository Structure is not compliant".
I have tested this on my fork, it seems that custom-light-popup-card.js
needs to be renamed to hass-custom-light-popup-card.js
(to match the repo) and HACS allows it to be installed.
Not sure how I get the header to display as the rest of the popup. On desktop it shows up just fine.
Release 0.4.8 seems to overwrite system language when sliding light to off. Prior versions works as expected.
Maybe relevant
if(el) {el.dataset.value = value+"%";}
if(el) {el.innerText = (value == 0) ? "Off" : value + "%";}
So this is how I have my popup card set up. The card pops up and shows the shade position correctly on the slider, currently 50% however the percentage at the top shows 0%. Additionally, moving the slider does not control the shade at all.
Is there something else that needs to be added for shades or does the card just not work with cover entities?
cover.dining_room_right:
style:
$: |
.mdc-dialog .mdc-dialog__container {
width: 50%;
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
width: 50%;
box-shadow:none;
}
.: |
:host {
--mdc-theme-surface: rgba(0,0,0,0);
--secondary-background-color: rgba(0,0,0,0);
--ha-card-background: rgba(0,0,0,0);
--mdc-dialog-scrim-color: rgba(0,0,0,0.8);
--mdc-dialog-min-height: 100%;
--mdc-dialog-min-width: 100%;
--mdc-dialog-max-width: 100%;
}
mwc-icon-button {
color: #FFF;
}
card:
type: custom:light-popup-card
icon: mdi:blinds
entity: cover.dining_room_right
title: Shade Position
I love the look of this dimmer card. I'm trying to popup a horizontal-stack card with multiple dimmers. It is working well so far. I just don't have an indicator of which dimmer corresponds to which light. I could use icons for each, but that's not ideal. It would be great to add an optional title for each dimmer above the icon.
Hi,
All popup cards not working after updating HA to version 0.113
After a lot of trial and error I have the light popup card working as expected on my desktop browser (Brave). When I perform a 'hold action', I have the light popup card display where I can control my lights.
I come into an issue when I use the Home Assistant app on Android... I perform the 'hold action' to bring up the light popup card, but instead I get the standard more-info options.
I'm on Home Assistant 2021.8.8 - Home Assistant OS 6.2. I'm using the latest version of the Android app.
title: Home
views:
- title: "Home"
icon: mdi:home-outline
path: "home"
cards:
- type: button
entity: light.tv
icon_height: 40px
popup_cards:
light.tv:
title: " "
style:
$: |
.mdc-dialog .mdc-dialog__container {
width: 100%;
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
width:100%;
box-shadow:none;
}
.: |
:host {
--mdc-theme-surface: rgba(0,0,0,0);
--secondary-background-color: rgba(0,0,0,0);
--ha-card-background: rgba(0,0,0,0);
--mdc-dialog-scrim-color: rgba(0,0,0,0.8);
--mdc-dialog-min-height: 100%;
--mdc-dialog-min-width: 100%;
--mdc-dialog-max-width: 100%;
}
mwc-icon-button {
color: #FFF;
}
card:
type: "custom:light-popup-card"
entity: light.tv
icon: "mdi:lightbulb"
fullscreen: true
settings:
openButton: Advanced
closeButton: Close
settingsCard:
type: "custom:light-entity-card"
cardOptions:
entity: light.tv
hide_header: true
brightness: false
white_value: true
actionsInARow: 4
brightnessWidth: 150px
brightnessHeight: 400px
switchWidth: 150px
switchHeight: 400px
borderRadius: 12px
Any help would be appreciated!
Is it possible to make the brightness % dynamically move up/down when the slider bar is moved?
Beautiful card.
After reading title card I understand that it is for browser_mod.
When I use it alone, no card is displayed (it is present in raw editor but not in view).
Would it be possible to make this card work outside of browser_mod ?
On the forum thread, the designer replied that it was a card like any other, Unfortunately it does not appear outside of browser_mod.
Is this possible to add the possibility to display this card without browser_mod like a normal card ?
Title says it all. When maximized via sliding, the value placed into the backend is between 251 and 255. Most of the lights in my configuration get set to 252 which is 99%, making it impossible to set to 100%.
I'm just using the default style provided in the example.
light.bonus_room_office_fixture:
title: ""
style:
position: fixed
z-index: 999
top: 0
left: 0
height: 100%
width: 100%
display: block
align-items: center
justify-content: center
background: rgba(0, 0, 0, 0.5)
flex-direction: column
margin: 0
card:
type: custom:light-popup-card
entity: light.bonus_room_office_fixture
icon: None
sliderTrackColor: var(--paper-item-icon-color)
sliderThumbColor: var(--paper-item-icon-color)
I have a light with just a dimmer attribute, no colour or temperature. The popup only shows a switch, unlike my colour bulbs where the popup has a slider.
Hi Dbuit,
As I'm not sure you read my message on the closed thread #15 (comment) , I've decided to open a new one here.
Would you mind adding the option to change the background-color of .range-holder input[type="range"] ?
Thanks
Hi,
When I try to add the plugin to HACS, it gives the following error:
An error ocoured while processing
Exception: HacsException
Message: GitHub returned 403 for https://api.github.com/repos/DBuit/light-popup-card
Could not add this repository, make sure it is compliant with HACS.
Can you fix that?
Hi,
Thanks for having implemented the service call instead of the scene - this is great!
I have a problem though with my iPhone (iPhone 7+ under iOS 13.3, HA companion app, same thing if using Safari). Nothing happens when I tap on action but error in HA logs. It works like a charm on my iMac though.
Here is the error showing up in the log:
http:// HASSIOADRESS /community_plugin/light-popup-card/light-popup-card.js?v=20:193:30040 TypeError: undefined is not an object (evaluating 't.path[0]')
11:48 components/system_log/init.py (ERROR)
Hey I would love to change the scene buttons based on the state of light. I the popup card for the whole room and the scene buttons for individual lights with a light.toggle
. Is it possible to somehow customize the color:
parameter on actions:
?
Like this:
[[[
if (states['light.test'].state == 'on')
return 'red';
else
return 'black';
]]]
It would be pretty great if there were an added feature to automatically close a pop-up when a user triggers an event (such as arming the alarm panel)
Hello,
Its not clear to me how I am supposed to use popup_cards
and if that is related in any way w/ popup-card
or browser-mod
. Is there a hello world like example that shows this template (?) defined and then used in a view within lovelace that I am somehow overlooking ?
thanks
Hi,
Device: iPhone 11 Pro - iOS 13.6
Software: Chrome or Home Assitant app
I can confirm the same popup window works just fine on Desktop Chrome.
As you can see on the screenshot it looks like the slider color is filling the entire bottom side of the screen:
resources:
- url: /hacsfiles/Homekit-panel-card/homekit-panel-card.js
type: module
- url: /hacsfiles/light-popup-card/light-popup-card.js
type: module
- url: /hacsfiles/media_player-popup-card/media_player-popup-card.js
type: module
- url: /hacsfiles/thermostat-popup-card/thermostat-popup-card.js
type: module
- url: /browser_mod.js
type: module
- url: /hacsfiles/lovelace-card-mod/card-mod.js
type: module
- url: /hacsfiles/bkk-stop-card/bkk-stop-card.js
type: module
- url: /hacsfiles/fkf-garbage-collection-card/fkf-garbage-collection-card.js
type: module
- url: /hacsfiles/lovelace-more-info-card/more-info-card.js
type: module
views:
- title: "Nappali"
icon: mdi:home-outline
path: "nappali"
panel: true
cards:
- type: "custom:homekit-card"
statePositionTop: true
entities:
- title: Világítás
popup:
type: custom:light-popup-card
settings: true
sliderColoredByLight: true
actionsInARow: 5
entities:
- entity: light.living_room_rgbw
name: "Nappali LED"
popupExtend:
settingsCard:
type: custom:more-info-card
cardOptions:
entity: light.living_room_rgbw
actions:
- service: scene.turn_on
service_data:
entity_id: scene.living_room_white_20
color: "#FFFFFF"
name: "White 20"
- service: scene.turn_on
service_data:
entity_id: scene.living_room_white_40
color: "#FFFFFF"
name: "White 40"
- service: scene.turn_on
service_data:
entity_id: scene.living_room_white_60
color: "#FFFFFF"
name: "White 60"
- service: scene.turn_on
service_data:
entity_id: scene.living_room_white_80
color: "#FFFFFF"
name: "White 80"
- service: scene.turn_on
service_data:
entity_id: scene.living_room_white_100
color: "#FFFFFF"
name: "White 100"
- service: scene.turn_on
service_data:
entity_id: scene.living_room_red
color: "#FF0000"
name: "Red"
- service: scene.turn_on
service_data:
entity_id: scene.living_room_green
color: "#00FF00"
name: "Green"
- service: scene.turn_on
service_data:
entity_id: scene.living_room_blue
color: "#0000FF"
name: "Blue"
- service: scene.turn_on
service_data:
entity_id: scene.living_room_yellow
color: "#FFFF00"
name: "Yellow"
- service: scene.turn_on
service_data:
entity_id: scene.living_room_cyan
color: "#00FFFF"
name: "Cyan"
- service: scene.turn_on
service_data:
entity_id: scene.living_room_magenta
color: "#FF00FF"
name: "Magenta"
- service: scene.turn_on
service_data:
entity_id: scene.living_room_maroon
color: "#800000"
name: "Maroon"
- service: scene.turn_on
service_data:
entity_id: scene.living_room_orange
color: "#FFA500"
name: "Orange"
- service: scene.turn_on
service_data:
entity_id: scene.living_room_brown
color: "#A52A2A"
name: "Brown"
- service: scene.turn_on
service_data:
entity_id: scene.living_room_seagreen
color: "#2E8B57"
name: "Sea Green"
Hi,
I would like to suggest to add transition to _setBrightness function. It works well and it's a lot of smoother for eyes.
_setBrightness(state, value) { this.hass.callService("homeassistant", "turn_on", { entity_id: state.entity_id, brightness: value * 2.55, transition: 0.5 }); }
I love that we are able to call services in the popup, but I would also love to be able to use other actions, such as "fire-dom-event" on a button. This way, I can create multiple popups spanning out of one popup!
Thanks for the great card :)
It would be great if you could use a data_template as an entity_id. This would be great with cards like decluttering-card and auto-entities. For instance:
- icon: 'mdi:link-plus'
color: var(--background-color)
service: squeezebox.sync
service_data:
entity_id: "{{states.media_player.lms_speakers.attributes.active_child}}"
other_player: media_player.lms
Currently this doesn't work because templates is not supported, like{{states.media_player.lms_speakers.attributes.active_child}}
I hope this can be also added to the other popup cards (media_player and cover).
Hi,
I use to have a background image in the style of the popup, like the example below:
``style:
position: fixed
z-index: 999
top: 0
left: 0
height: 99%
width: 100%
color: var(--homekit-white)
display: block
align-items: center
justify-content: center
background: 'center / cover repeat-x url("/local/images/night.jpg") fixed'
flex-direction: column
margin: 0
"--iron-icon-fill-color": "#FFF"`
and now it's not working anymore with the new style template, I've tried this:
`` .: |
:host {
--mdc-theme-surface: rgba(0,0,0,0);
--secondary-background-color: rgba(0,0,0,0);
--ha-card-background: rgba(0,0,0,0);
--mdc-dialog-scrim-color: 'center / cover repeat-x url("/local/images/night.jpg") fixed';
--mdc-dialog-min-height: 100%;
--mdc-dialog-min-width: 100%;
--mdc-dialog-max-width: 100%;`
Your help will be appreciated.
Thanks.
I'm using a cover component for my garage door opener created through ESPHome. supported_features
is set to 11, so it's automatically making it a brightness slider. What about just adding a "type" attribute that defaults to something like "auto". If "auto", it will auto-detect the type, but you could set it to "switch" or "slider" as well.
seems that it does not work on a group of lights. slider always at 50%
seems that it does not work on a group of lights. slider always at 50%
Hey man, I just discovered this and absolutely love it!
I have a horizontal stack group with 3 lights (configured via popup_cards:). When I press the middle one, it not only opens the card as intended - it also turns on the light at 28-41%.
I have tried to use another light in the middle and the behaviour is exactly the same - so it's not the light itself.
Note: I tested a little more and found out: If the brightness bar is overlapping my thumb's position on tap, it jumps to the according %.
Thanks for any help in advance.
Hi,
Great work here - just noticed that my "long" scene name ("concentration") was truncated because of the overflow:hidden attribute of scene name.
For now, I edited the js file in order to fix it but would you mind adding a permanent fix for this ?
Also, would be great if we can close the popup by clicking/taping in the empty space, instead of clicking on the cross icon.
Thanks
Certain entities, namely in my case Insteon via ISY uses brightness_pct as the attribute rather than just brightness.
is there a way to show actions on certain situation...
for example if a attribute exist
in my case, we have two types of lights, ones with full color and others "only" with temperature color and I use button cards templates.
I need to create two templates for lights. Ones for full color bulbs and other with temp_color only. If is there a way to show actions if, I only use one template....
thanks...... and sorry for my english
If I click on a scene to stuff that is tied to Hue bulbs they briefly become unavailable. If I turn off the lights via the Hue app I see them being turned on again. It looks like the scene activation is being done multiple times when only clicking once.
Error logged while debugging with Chrome:
Chrome debugging message:
DevTools failed to load SourceMap: Could not load content for https://xxx.xxx.xxx.xxx/hacsfiles/light-popup-card/index.m.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
HA log:
Log Details (ERROR)
Logger: hacs
Source: custom_components/hacs/http.py:82
First occurred: 10:06:54 AM (2 occurrences)
Last logged: 10:06:54 AM
Tried to serve up '/config/www/community/light-popup-card/index.m.js.map' but it does not exist
Hello,
In my particular case I have Shelly RGBW devices and would be good to have the following options for the card:
At the top selectable modes:
RGB | White
In case of RGB the slider controls the Brightness. In case of White the slider controls white_level.
+1 for conditonal scenes like if RGB have xyz options what you define and for white be able to define different scenes (like 20%, 50%, 80%, 100% for example)
Thanks!
Would be really cool if you could integrate the possiblity to add images to the action button icons :)
Hello!
I'm trying to spruce up my dashboard and have stumbled upon these 2 HACS components:
To be brief: I use "fire-dom-event" to generate a custom popup (with light-popup-card) on prolonged pressure of a light entity.
It works very well on my smartphone (Android-Xiaomi) with the official HomeAssistant app while it doesn't work on Firefox (or Edge) on two of my Windows PCs or on my girlfriend's smartphone, again with the official HomeAssistant app (Android-Xiaomi).
Here's what the popup looks like: https://imgur.com/a/BB1Genr
Anyone have any ideas?
The code for the card is as follows:
- entity: light.flos
name: Flos
tap_action:
action: toggle
double_tap_action:
action: more-info
hold_action:
action: fire-dom-event
browser_mod:
command: popup
title: Flos
card:
type: 'custom:light-popup-card'
entity: light.flos
icon: 'mdi:lightbulb'
settings:
openButton: Altri Colori
closeButton: Chiudi
settingsCard:
type: 'custom:light-entity-card'
cardOptions:
entity: light.flos
hide_header: true
brightness: false
smooth_color_wheel: true
actionsInARow: 2
brightnessWidth: 150px
brightnessHeight: 400px
switchWidth: 150px
switchHeight: 400px
borderRadius: 12px
actions:
- service: scene.turn_on
color: '#ffaa00'
service_data:
entity_id: scene.flos_relax
- service: scene.turn_on
color: '#0191fc'
service_data:
entity_id: scene.flos_blu
- service: scene.turn_on
color: '#f0e479'
service_data:
entity_id: scene.flos_libro
Thanks!
First of all thank for you a fantastic Home Assistant addon.
After updating to 0.5 all users in my house that are not Home Assistant admins can no longer activate any of the buttons below the slider.
Logs show this error.
hacsfiles/light-popup-card/light-popup-card.js:4002:31 Uncaught TypeError: Cannot add property action, object is not extensible
The change log says that exsisting services dont need to be changed to work, but that seems to only be for admin users.
Because once I added the action call service line it now works for all users.
That brings me to the second thing I wanted to point out. The example code says to use action:call-service
with no spaces.
Here is the section from the readme.
actions:
- action:call-service
service: scene.turn_on
service_data:
entity_id: scene.energie
color: "#8BCBDD"
name: energie
- action:call-service
service: homeassistant.toggle
service_data:
entity_id: light.voordeurlicht
name: voordeur
icon: mdi:lightbulb
- action: fire-dom-event
name: test
browser_mod:
command: popup
title: 'My Title'
card:
type: 'custom:mini-graph-card'
entities:
- weather.weersverwachting
However my config errors out when I don't insert a space between action: and call-service.
After modifying all of my slider configs with action: call-service
all of my home users can use the lights normally again.
TL:DR - Configs need to be changed to allow non-admin users to still use lighting presets and documentation for the scene seems to be incorrect.
hello, my i ask how can i set the css value to exit the popup card when i tap the blank place jusk like light-popup-card?
When setting the property fullscreen to false, the wrapper is correctly omitted in the HTML but the icon div keeps the fullscreen that leads to a margin-top: -64px; so the icon is not visible. That's not good I think.
Thanks :)
I tried with card-mod but without success.
Thanks!
Hi @DBuit, HA 0.115.x broke a lot of custom-cards that could be used inside of the extraSettings of your light popup card. (like the light-entity-card and the more-info-card). These cards no longer work and I was wondering if it was possible to change the settings button to behave like a more-info
action like a normal button would do (normal behavior is tap_action with toggle
and hold_action with more-info
). This way when we press settings it would just open the core more-info window.
Thanks for your hard work
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.