Implementation of popup cards #42

schumijo · 2021-11-17T09:53:04Z

Hi,
Implementation of popup cards for lights, power outlets and airconditionner.

Need some documentation on Wiki.

Popup for outlet and light

Initial popup version

bavo · 2021-11-30T13:08:39Z

Hi @schumijo

I'm having some problems getting my theme variables into the popup card.
Did you encounter the same problem? And did you do anything specifically to fix this?

bavo

I added some comments to center the popup_light brightness slider better.
Let me know what you think 😉

bavo · 2021-11-30T21:57:27Z

config/minimalist-templates/popups_templates.yaml

+                              background: none !important;
+                              box-shadow: none !important;
+                            }
+                            .off {


You can use .slider-container input[type="range"] to merge the .on and .off css classes into one statement

bavo · 2021-11-30T22:04:41Z

config/minimalist-templates/popups_templates.yaml

+                            }
+                            .on {
+                              border: 1px solid rgba(var(--color-theme),0.3) !important;
+                            }


I have added a flexbox to the slider card because it was not centered in most of my screens. Flexbox is a easy solution to center things in every browser that supports it.

.slider-container { display: flex; justify-content: center; align-items: center; }

And in the slider-container input from above:

.slider-container input[type="range"]{ position: revert !important; }

bavo · 2021-11-30T22:19:40Z

config/minimalist-templates/popups_templates.yaml

+                        $: |
+                          #interactionLayer{ z-index: 1; filter: opacity(0.6);}
+                          #backgroundLayer{
+                            filter: blur(20px);


you can use the smooth_color_wheel property from the light-entity-card instead of blurring the wheel yourself.

bavo · 2021-11-30T22:29:26Z

config/minimalist-templates/popups_templates.yaml

+                    state:
+                      - operator: template
+                        value: >
+                          [[[ return new URL(window.location.href).hash !== '#color' ]]]


This does not work for me 😞 I don't know why. Still looking for a solution.

schumijo · 2021-12-01T07:25:12Z

Hi Bavo,

Thank you for your comments. I will take a look.
About theme variable, I have the same message on dev console with Chrome... but it works anyway

bavo · 2021-12-01T15:59:12Z

config/minimalist-templates/popups_templates.yaml

+                          background: none !important;
+                          box-shadow: none !important;
+                          padding: 10px 0 10px 0 !important;
+                        }


Suggested change

}

}

color_temp:

type: custom:button-card

styles:

grid:

- grid-template-areas: '"item1"'

- grid-template-columns: 1fr

- grid-template-rows: min-content

card:

- background: none

- box-shadow: none

- padding: 4%

custom_fields:

item1:

card:

type: "custom:my-slider"

entity: "[[[ return entity.entity_id ]]]"

minBar: "[[[ return entity.attributes.min_mireds ]]]"

minSet: "[[[ return entity.attributes.min_mireds ]]]"

maxBar: "[[[ return entity.attributes.max_mireds ]]]"

maxSet: "[[[ return entity.attributes.max_mireds ]]]"

function: 'Warmth'

radius: 20px

rotate: 270

containerHeight: 320px

width: 250px

height: 100px

thumbHorizontalPadding: 0px

thumbWidth: 2%

thumbHeight: 85px

thumbColor: '#000'

mainSliderColor: rgba(255, 255, 255, 0)

mainSliderColorOff: rgba(255, 255, 255, 0)

card_mod:

style: |

ha-card {

background: none !important;

box-shadow: none !important;

}

.slider-container input[type="range"] {

position: revert !important;

border: 1px solid rgba(208, 208, 208, 1) !important;

background: linear-gradient(90deg, #c9f2fc, #fff, #f3db6d);

--thumb-top: 1px !important;

}

.slider-container input[type="range"]::-webkit-slider-thumb {

margin-top: 7px;

background-color: rgba(1, 1, 1, 0);

}

.slider-container input[type="range"]::-moz-range-thumb {

background-color: rgba(1, 1, 1, 0);

}

.slider-container {

display: flex;

justify-content: center;

align-items: center;

}

I've added an extra slider to change the color temperature of the light.

UPDATE: Added color temperature to the card.
This is achieved by making the mainSliderColor transparent and using a css gradient function as a secondary slider color. The thumb is a small black bar, but I had to add some custom styling to make them look the same on all the different browser.

bavo · 2021-12-01T16:03:46Z

config/minimalist-templates/popups_templates.yaml

+                          icon:
+                            - color: "rgba(var(--color-blue),1)"
+                          img_cell:
+                            - background-color: "rgba(var(--color-blue), 0.2)"


Suggested change

- background-color: "rgba(var(--color-blue), 0.2)"

- background-color: "rgba(var(--color-blue), 0.2)"

item3:

card:

icon: "mdi:sun-thermometer-outline"

name: Temperatuur

type: "custom:button-card"

template: popup_button

tap_action:

action: navigate

navigation_path: "#color_temp"

state:

- operator: template

value: >

[[[ return !entity.attributes.supported_color_modes.includes("color_temp"); ]]]

styles:

card:

- display: none

- operator: template

value: >

[[[ return new URL(window.location.href).hash === '#color_temp' ]]]

styles:

icon:

- color: "rgba(var(--color-blue),1)"

img_cell:

- background-color: "rgba(var(--color-blue), 0.2)"

The extra button for changing the color temperature. I'm not sure about the icon for the color temperature, but i don't know what else to use.

UPDATE: Do not display the color temp option when the light does not support it.

bavo · 2021-12-01T16:06:42Z

The next step would be to show the color, color temperature, and brightness buttons only when the light supports these operations. Thats the next thing i'll look into 😉

bavo · 2021-12-02T16:39:54Z

Okey, here are some quick screenshots of what I've accomplished so far with your popup code (only lights)

I've added a color temperature slider to the popup card with the gradient background:

I've made the buttons appear and disappear based on the supported_light_modes attribute from the light:

I've also added a background color based on the initial design by 7 ahang on behance.
And I added some color to the power button when the light is active.

Still to be done:

Display percentage next to the slider (see ahang light slider for an example)
Add some color to the currently active option (brightness, color, color_temp)
The solution you provided does not work for me. I don't know why 😞

Let me know if you are interested in these changes. Then I will continue to send improvements to the code.
But for now I have the feeling that I'm pushing too much of my code 😛

schumijo · 2021-12-03T07:38:01Z

Hi @bavo

Excellent work ! I am really interested about your changes. That is the target of this PR : everybody can add some improvements
About percentages next to slider, you can see in my code this part is commented because it doesn't work with browser mod. I already ask for help on ha forum but nobody found a solution.

bavo · 2021-12-03T13:08:25Z

Okey, I've updated the code for the brightness slider in my original comment to reduce spam 😉

bavo · 2021-12-03T13:21:27Z

config/minimalist-templates/popups_templates.yaml

+          item3:
+            card:
+              type: custom:button-card
+              template: popup_list_items


Suggested change

template: popup_list_items

styles:

grid:

- grid-template-areas: >

[[[

var areas = [];

var brightness_modes = ["brightness", "hs", "color_temp", "rgb", "rgbw"];

var color_modes = ["hs", "rgb", "rgbw"];

var color_temp_modes = ["color_temp"];

if (entity.attributes.supported_color_modes.some(r => brightness_modes.includes(r))) {

areas.push("item1");

}

if (entity.attributes.supported_color_modes.some(r => color_modes.includes(r))) {

areas.push("item2");

}

if (entity.attributes.supported_color_modes.some(r => color_temp_modes.includes(r))) {

areas.push("item3");

}

return "\"" + areas.join(" ") + "\"";

]]]

- grid-template-columns: >

[[[

var columns = [];

var brightness_modes = ["brightness", "hs", "color_temp", "rgb", "rgbw"];

var color_modes = ["hs", "rgb", "rgbw"];

var color_temp_modes = ["color_temp"];

if (entity.attributes.supported_color_modes.some(r => brightness_modes.includes(r))) {

columns.push("1fr");

}

if (entity.attributes.supported_color_modes.some(r => color_modes.includes(r))) {

columns.push("1fr");

}

if (entity.attributes.supported_color_modes.some(r => color_temp_modes.includes(r))) {

columns.push("1fr");

}

return columns.join(" ");

]]]

- grid-template-rows: min-content

- column-gap: 0px

card:

- background: none

- box-shadow: none

- padding: 0px

I've ditched the popup_list_items and created my own grid layout. The layout is calculated on how many features are supported by the entity. I don't know why, but you also need a 'display: none' on the items below. (see the next change) I would think that not specifying items here in the grid layout removes them from the layout. But there just appended to the grid. So the solution is a bit verbose, but it works quite well.

bavo · 2021-12-03T13:25:07Z

config/minimalist-templates/popups_templates.yaml

+                    tap_action:
+                      action: navigate
+                      navigation_path: "#brightness"
+                    state:


Suggested change

state:

state:

- operator: template

value: >

[[[

var brightness_modes = ["brightness", "hs", "color_temp", "rgb", "rgbw"];

return !entity.attributes.supported_color_modes.some(r => brightness_modes.includes(r));

]]]

styles:

card:

- display: none

Do not display the brightness options when the light does not support it.

bavo · 2021-12-03T13:26:14Z

config/minimalist-templates/popups_templates.yaml

+                    tap_action:
+                      action: navigate
+                      navigation_path: "#color"
+                    state:


Suggested change

state:

state:

- operator: template

value: >

[[[

var color_modes = ["hs", "rgb", "rgbw"];

return !entity.attributes.supported_color_modes.some(r => color_modes.includes(r));

]]]

styles:

card:

- display: none

Do not display the color wheel when the light does not support it

CM000n · 2021-12-12T15:26:07Z

It looks like there are currently merge conflicts due to the recent changes in the DEV Branch. Could you please have another look at it @schumijo & @bavo

bavo · 2021-12-12T22:27:33Z

👍

schumijo · 2021-12-13T07:26:03Z

Hi @CM000n
Good job with the new beta release !
Don't hesitate if you need some help with the code. About wiki, I was also waiting for informations from @Paddy0174 to add popup cards documentation. So sadly I can't help you.
About popup cards, I will have a look to the overall code and push a new PR updated to beta 7 in few days

bavo · 2021-12-13T08:28:48Z

@schumijo I'm also working on a pull request into this pull-request for my changes 😉 But I'm hoping to finish in a couple of days.

schumijo · 2021-12-13T08:56:09Z

Hi @bavo
Ok I let you work on light popup card. I will focus on power and air conditioner.
Just one thing about light popup : I think we should replace the use of hashes with a call on fire-dom. It seems to be more reliable in my configuration.

bavo · 2021-12-14T16:24:06Z

Hi @schumijo,

How do you see the implementation of the popup with a fire-dom?
Does a press on the brightness button create a new popup?

Wrong copy paste logic 🤦

schumijo · 2021-12-14T19:37:10Z

@bavo,

By putting a fire-dom event on brightness button instead of hash reference, it will replace the current popup with the new one (I hope it's clear)
I will try to share you the code tomorrow

schumijo · 2021-12-15T09:07:44Z

Hi @bavo,

You can find my quick and dirty code here : https://github.com/schumijo/UI/blob/light_popup_fire_dom/config/minimalist-templates/popup_templates.yaml

New templates are popup_light_2, popup_light_brightness and popup_light_color
I just remove the hash on tap_action with a fire-dom event.
On my HA, when using state-switch, sometimes the popup doesn't appear. With this method, no problem.

Sorry, I didn't add you beautiful modifications on my code. This code needs to be cleaned/optimized.

bavo · 2021-12-15T11:05:17Z

Np, I’ll have a look. 👍

I don’t know if you have seen the pull request i have send to your branch to include my changes? I’ll update the pull request to include your changes.

schumijo · 2021-12-15T11:58:12Z

Yes I see it. Good job !

WIP: started a new pull request to include my changes

schumijo · 2021-12-18T15:58:40Z

Hi

Screenshots of work in progress on updated power_outlet popup. I manage to create "responsive" popup.
To-do : small tweaks and translations.
@bavo : My repo is up-to-date

Tablet/desktop :

Smartphone :

schumijo · 2021-12-22T09:07:52Z

Hi @CM000n

Oups I did something wrong with the source branch on my repo :(
Are you able to reopen this PR ?

CM000n · 2021-12-22T09:11:13Z

Oups, nope, sorry. 😱
You have deleted the corresponding branch for this PR on your side.
Maybe you can restore it in your repo and create a new PR?

schumijo · 2021-12-22T10:29:09Z

New PR #132
Sorry guys

bavo · 2021-12-22T11:35:33Z

No problem

schumijo added 8 commits November 8, 2021 16:40

First dev version

67f4903

Popup for outlet and light

Initial popup version

ee0f8bf

Initial popup version

Initial popup version

db0fb17

Initial popup version

Initial popup version

2e053f7

Initial popup version

Initial popup version

e7f4a14

Initial popup version

Initial popup version

3af266b

Initial popup version

Initial popup version

7bbe37c

Initial popup version

Initial popup version

ad557b2

Initial popup version

schumijo added the enhancement label Nov 17, 2021

bavo reviewed Nov 30, 2021

View reviewed changes

schumijo closed this Dec 1, 2021

schumijo reopened this Dec 1, 2021

bavo reviewed Dec 1, 2021

View reviewed changes

bavo reviewed Dec 3, 2021

View reviewed changes

CM000n added feature and removed enhancement labels Dec 12, 2021

WIP: started a new pull request to include my changes

a68f71d

Fix small errors

eec8c53

Wrong copy paste logic 🤦

Merge pull request #1 from bavo/popups-dev-bavo

52a619f

WIP: started a new pull request to include my changes

CM000n mentioned this pull request Dec 17, 2021

Add Documentation for popup cards UI-Lovelace-Minimalist/page#12

Open

CM000n added the WIP label Dec 17, 2021

schumijo added 2 commits December 18, 2021 16:51

Responsive popups

3936766

Add screenshots

e0406a3

CM000n mentioned this pull request Dec 19, 2021

v1.0.0-beta.8 #108

Merged

schumijo closed this Dec 22, 2021

schumijo deleted the popups-dev branch December 22, 2021 08:57

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implementation of popup cards #42

Implementation of popup cards #42

schumijo commented Nov 17, 2021

bavo commented Nov 30, 2021

bavo left a comment •

edited

Loading

bavo Nov 30, 2021

bavo Nov 30, 2021 •

edited

Loading

bavo Nov 30, 2021

bavo Nov 30, 2021 •

edited

Loading

schumijo commented Dec 1, 2021

bavo Dec 1, 2021 •

edited

Loading

bavo Dec 1, 2021 •

edited

Loading

bavo commented Dec 1, 2021

bavo commented Dec 2, 2021 •

edited

Loading

schumijo commented Dec 3, 2021

bavo commented Dec 3, 2021 •

edited

Loading

bavo Dec 3, 2021

bavo Dec 3, 2021

bavo Dec 3, 2021

CM000n commented Dec 12, 2021

bavo commented Dec 12, 2021

schumijo commented Dec 13, 2021

bavo commented Dec 13, 2021

schumijo commented Dec 13, 2021

bavo commented Dec 14, 2021

schumijo commented Dec 14, 2021

schumijo commented Dec 15, 2021

bavo commented Dec 15, 2021

schumijo commented Dec 15, 2021

schumijo commented Dec 18, 2021

schumijo commented Dec 22, 2021

CM000n commented Dec 22, 2021

schumijo commented Dec 22, 2021

bavo commented Dec 22, 2021

-                        }
+                        }
+                color_temp:
+                  type: custom:button-card
+                  styles:
+                    grid:
+                      - grid-template-areas: '"item1"'
+                      - grid-template-columns: 1fr
+                      - grid-template-rows: min-content
+                    card:
+                      - background: none
+                      - box-shadow: none
+                      - padding: 4%
+                  custom_fields:
+                    item1:
+                      card:
+                        type: "custom:my-slider"
+                        entity: "[[[ return entity.entity_id ]]]"
+                        minBar: "[[[ return entity.attributes.min_mireds ]]]"
+                        minSet: "[[[ return entity.attributes.min_mireds ]]]"
+                        maxBar: "[[[ return entity.attributes.max_mireds ]]]"
+                        maxSet: "[[[ return entity.attributes.max_mireds ]]]"
+                        function: 'Warmth'
+                        radius: 20px
+                        rotate: 270
+                        containerHeight: 320px
+                        width: 250px
+                        height: 100px
+                        thumbHorizontalPadding: 0px
+                        thumbWidth: 2%
+                        thumbHeight: 85px
+                        thumbColor: '#000'
+                        mainSliderColor: rgba(255, 255, 255, 0)
+                        mainSliderColorOff: rgba(255, 255, 255, 0)
+                        card_mod:
+                          style: |
+                            ha-card {
+                              background: none !important;
+                              box-shadow: none !important;
+                            }
+                            .slider-container input[type="range"] {
+                              position: revert !important;
+                              border: 1px solid rgba(208, 208, 208, 1) !important;
+                              background: linear-gradient(90deg, #c9f2fc, #fff, #f3db6d);
+                              --thumb-top: 1px !important;
+                            }
+                            .slider-container input[type="range"]::-webkit-slider-thumb {
+                              margin-top: 7px;
+                              background-color: rgba(1, 1, 1, 0);
+                            }
+                            .slider-container input[type="range"]::-moz-range-thumb {
+                              background-color: rgba(1, 1, 1, 0);
+                            }
+                            .slider-container {
+                              display: flex;
+                              justify-content: center;
+                              align-items: center;
+                            }

-              template: popup_list_items
+              styles:
+                grid:
+                  - grid-template-areas: >
+                      [[[
+                            var areas = [];
+                            var brightness_modes = ["brightness", "hs", "color_temp", "rgb", "rgbw"];
+                            var color_modes = ["hs", "rgb", "rgbw"];
+                            var color_temp_modes = ["color_temp"];
+                            if (entity.attributes.supported_color_modes.some(r => brightness_modes.includes(r))) {
+                                areas.push("item1");
+                            }
+                            if (entity.attributes.supported_color_modes.some(r => color_modes.includes(r))) {
+                                areas.push("item2");
+                            }
+                            if (entity.attributes.supported_color_modes.some(r => color_temp_modes.includes(r))) {
+                                areas.push("item3");
+                            }
+                            return "\"" + areas.join(" ") + "\"";
+                      ]]]
+                  - grid-template-columns: >
+                      [[[
+                            var columns = [];
+                            var brightness_modes = ["brightness", "hs", "color_temp", "rgb", "rgbw"];
+                            var color_modes = ["hs", "rgb", "rgbw"];
+                            var color_temp_modes = ["color_temp"];
+                            if (entity.attributes.supported_color_modes.some(r => brightness_modes.includes(r))) {
+                                columns.push("1fr");
+                            }
+                            if (entity.attributes.supported_color_modes.some(r => color_modes.includes(r))) {
+                                columns.push("1fr");
+                            }
+                            if (entity.attributes.supported_color_modes.some(r => color_temp_modes.includes(r))) {
+                                columns.push("1fr");
+                            }
+                            return columns.join(" ");
+                      ]]]
+                  - grid-template-rows: min-content
+                  - column-gap: 0px
+                card:
+                  - background: none
+                  - box-shadow: none
+                  - padding: 0px

Implementation of popup cards #42

Implementation of popup cards #42

Conversation

schumijo commented Nov 17, 2021

bavo commented Nov 30, 2021

bavo left a comment • edited Loading

Choose a reason for hiding this comment

bavo Nov 30, 2021

Choose a reason for hiding this comment

bavo Nov 30, 2021 • edited Loading

Choose a reason for hiding this comment

bavo Nov 30, 2021

Choose a reason for hiding this comment

bavo Nov 30, 2021 • edited Loading

Choose a reason for hiding this comment

schumijo commented Dec 1, 2021

bavo Dec 1, 2021 • edited Loading

Choose a reason for hiding this comment

bavo Dec 1, 2021 • edited Loading

Choose a reason for hiding this comment

bavo commented Dec 1, 2021

bavo commented Dec 2, 2021 • edited Loading

schumijo commented Dec 3, 2021

bavo commented Dec 3, 2021 • edited Loading

bavo Dec 3, 2021

Choose a reason for hiding this comment

bavo Dec 3, 2021

Choose a reason for hiding this comment

bavo Dec 3, 2021

Choose a reason for hiding this comment

CM000n commented Dec 12, 2021

bavo commented Dec 12, 2021

schumijo commented Dec 13, 2021

bavo commented Dec 13, 2021

schumijo commented Dec 13, 2021

bavo commented Dec 14, 2021

schumijo commented Dec 14, 2021

schumijo commented Dec 15, 2021

bavo commented Dec 15, 2021

schumijo commented Dec 15, 2021

schumijo commented Dec 18, 2021

schumijo commented Dec 22, 2021

CM000n commented Dec 22, 2021

schumijo commented Dec 22, 2021

bavo commented Dec 22, 2021

bavo left a comment •

edited

Loading

bavo Nov 30, 2021 •

edited

Loading

bavo Nov 30, 2021 •

edited

Loading

bavo Dec 1, 2021 •

edited

Loading

bavo Dec 1, 2021 •

edited

Loading

bavo commented Dec 2, 2021 •

edited

Loading

bavo commented Dec 3, 2021 •

edited

Loading