dbuit / light-popup-card Goto Github PK

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 }); }

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 :)

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!

Edit: example: https://images.squarespace-cdn.com/content/v1/54c95d06e4b04d8d26f97dde/1512488374239-LYWF9RWZCGTO2P1B5WY1/ke17ZwdGBToddI8pDm48kEfapULkyrgRZBi3HQtP_BAUqsxRUqqbr1mOJYKfIPR7LoDQ9mXPOjoJoqy81S2I8GRo6ASst2s6pLvNAu_PZdK_WKFfMrbvElg49tQbd8lP5qP0ZOBu8WUpVwnPdFCy6GqNq5BMprpHbdxqNUsfFDw/iPhone+brightness.jpeg?format=750w

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,
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.

Would be really cool if you could integrate the possiblity to add images to the action button icons :)

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

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 ?

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

• Makes scenes part more configurable by adding option to call a service with service data instead of just a scene

seems that it does not work on a group of lights. slider always at 50%

• Added capitalization on the On/Off names
• Custom border radius
• Remove overflow hidden for scene names
• make fullscreen option which removes the popup-wrapper
• supported_featuress == 1 should show slider instead of switch

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.

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?

https://imgur.com/a/o4bAQTB

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

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)

Hi,
All popup cards not working after updating HA to version 0.113

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.

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.

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!

Hold action when using Brave Browser

Hold action when using Android app

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

If overview has enough items that overflow is enabled, adjusting the slider changes the position on the screen (scrolls).

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.

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!

Is it possible to make the brightness % dynamically move up/down when the slider bar is moved?

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)

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,

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"

Hello!
I'm trying to spruce up my dashboard and have stumbled upon these 2 HACS components:

• browser-mod
• light-popup-card

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!

Not sure how I get the header to display as the rest of the popup. On desktop it shows up just fine.

https://hastebin.com/ucesuvurud.rb

https://imgur.com/a/XO09DXl

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?

Error logged while debugging with Chrome:

• Home Assistant Version 0.112.3
• Chrome Version 83.0.4103.116
• Home Assistant Supervised (Ubuntu Docker & Raspbian Docker)

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

seems that it does not work on a group of lights. slider always at 50%

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).

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';
          ]]]

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.

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 :)

Is it possible to change the colour of the slider and other elements?

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

The switch has a set width of 380px, which causes the sides to be cropped on a device with a narrow screen:

It seems to me that the width and height of the switch could be swapped (380px -> 150px and vice versa). This would cause it to look like:

This is more similar to HomeKit:

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

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

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)

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.

I tried with card-mod but without success.

Thanks!

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.

Certain entities, namely in my case Insteon via ISY uses brightness_pct as the attribute rather than just brightness.

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?

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.

Sins the latest update i cant get the button graffiks to show.
It works on Chrome based browser and on Iphone.
Its kinda gets a slider wierd look.

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 + "%";}