A different take on designing a Lovelace UI

TiNNauR · April 18, 2021, 10:00pm

Good time of day!
I have a question again.)
Following the recommendations, I copied all the files from github to my directories. I had to comment out a few lines in the files because it wouldn’t start. Now it started but gives errors.
Custom element doesn’t exist: button-card.

Can you tell me,please, what i can be done here, how and what exactly to fix?

The folder is on this path
/hassio/homeassistant/www/community/button-card
maybe do I need to move the folder somewhere?
Thanks in advance!

Martin_Pejstrup · April 19, 2021, 6:14am

Hi @Djal

That is what I have?

    gerda_last_clean:
      entity_id: sensor.time
      friendly_name: Sidste rengøring
      icon_template: mdi:calendar-clock
      value_template: >
        {{ state_attr('vacuum.gerda', 'clean_stop') | replace(' ','T') }}

Any other idea?

Djal · April 19, 2021, 6:22am

Have you installed Button-Card and declared it in your configuration.yaml?

Djal · April 19, 2021, 6:26am

I don’t get it. Why u didn’t try what i have suggested?

Murada99 · April 19, 2021, 7:10am

Did you install the add-on wtih HACS ?
Go to Configuration / Lovelace Dashboards
In the TAB Resources, you need to have the following entry:
/hacsfiles/button-card/button-card.js

Martin_Pejstrup · April 19, 2021, 11:17am

Hi

I was just mentioning, that what you suggested was already, what I had. Or is there a difference which I don’t see?

TiNNauR · April 19, 2021, 11:37am

Thank you for your feedback!)
Yes, I have HACS installed.
And yes, in resources I have /hacsfiles/button-card/button-card.js
Now Installed - IOS Dark Theme
Auto-entities was installed, I removed it because it didn’t start … and after removing it, the cards appeared,

Please tell me if auto-entities need to be installed, or is it possible without it? Maybe one interferes with the other and there is a conflict between them?
Before that, I just copied the folders and files from github to the appropriate directories, without installing.
Then I installed the button-card, as they recommended to me
In the integrations, I installed browser_mod, I realized what was also needed so that there were no errors in the cards.
What else needs to be installed to display information from the start?
Because now like this …

2021-04-19 13-58-551697×924 181 KB

And if possible, then briefly explain to me the logic of this all, well, or maybe there is a link to an explanation of the principle of interaction of elements. I just want to understand how it all interacts and what it needs and for what, so as not to ask you a lot of questions!)
Thanks a lot in advance!

Djal · April 19, 2021, 11:43am

What u showed me is not what I suggested

Djal · April 19, 2021, 11:46am

No you don’t need the auto entities.

The main thing in this design is a big picture element which take the whole design with all the stuff inside it (button card, markdown,…)

For what you need, just have a look at the custom component folder and install/declare the component.

paddy0174 · April 19, 2021, 1:55pm

This is what you have:

    gerda_last_clean:
      entity_id: sensor.time
      friendly_name: Sidste rengøring
      icon_template: mdi:calendar-clock
      value_template: >
        {{ state_attr('vacuum.gerda', 'clean_stop') | replace(' ','T') }}

and this is the suggestion:

      roborock_last_clean:
        friendly_name: Dernier nettoyage
        icon_template: mdi:calendar-clock
        device_class: timestamp
        value_template: >
          {{ state_attr('vacuum.roborock_vacuum', 'clean_stop') | replace(' ','T') }}

See any difference? Hint: entity_id and device_class seem to be different between these two code snippets, aren’t they?

radinsky · April 20, 2021, 1:17pm

Have you ever found a solution for a wide cameras?
I finished with aspect_ratio but it doesn’t look good imho
better to resize and trim, but cannot figure out how :\

Se7enair · April 20, 2021, 1:56pm

I ended up with this

          - type: custom:button-card
            entity: camera.garten_kamera_hof
            name: Hof
            show_entity_picture: false
            show_state: false
            style:
              top: 64.5%
              left: 55.18%
              width: 10%
            # hold_action: 
            custom_fields:
              picture-elements:
                card:
                  type: picture-glance
                  title: Hof 
                  tap_action: !include popup/kamera.yaml
                  entities:
                    - entity: binary_sensor.garten_kamera_hof_bewegung
                  camera_image: camera.garten_kamera_hof
            styles:
              custom_fields:
                picture-elements: 
                  [top: -7%, left: -75%, width: 190%, position: absolute]
            template: base

Propably not the best solution and I still have the black bar at the bottom. But it works perfectly for me.
I can move the area of the camera image with the style of the custom field.

Klex1404 · April 22, 2021, 8:47am

Could you please share your popup/kamera.yaml please?
Quite curious how you created the popup.

Se7enair · April 22, 2021, 9:07am

Its just a lovelacecard: homeassistant-config/kamera.yaml at 8bcd289a7fba7c00358461e9b16ae8ad8bf4d59b · Se7enair/homeassistant-config · GitHub

The card can be found here:GitHub - AlexxIT/WebRTC: Home Assistant custom component for viewing IP cameras RTSP stream in real time using WebRTC technology
The best about this card, it uses webrtc technology, which make real time streaming possible. For me the best solution for cameras in homeassistant.

Klex1404 · April 24, 2021, 7:27am

Many thanks, great stuff, I didn’t know such an almost real-time camera card existed as well!
Somehting to do this weekend

Peter_Westerlund · April 24, 2021, 7:16pm

I really don’t understand why nothing works for me. No card is working. I have removed one after one to see if anyone will work. Right now I get a red box with