My Lovelace Plugins

You are the man! The new code worked perfectly on the chorme but not on the phone. I see the scroll is working but it does not show the rest of the content. Don’t know why:

On chrome:

One other thing I need is for the window to always open at the top then I assume that if I add that line “moreInfo.style.top = ‘0’;” it will work, right?

This is what i have so far:

configuration.yaml

input_boolean:
controle_remoto_sala:
name: Controle Remoto Geral da Sala
initial: off
icon: mdi:none

controle_remoto_sala_tv:
name: Controle Remoto da TV da Sala
initial: off
icon: mdi:none

controle_remoto_sala_htv:
name: Controle Remoto do HTV da Sala
initial: off
icon: mdi:none

controle_remoto_quarto:
name: Controle Remoto Geral do Quarto
initial: off
icon: mdi:none

controle_remoto_quarto_tv:
name: Controle Remoto da TV do Quarto
initial: off
icon: mdi:none

ui-lovelace.yaml:

resources:

  • url: /local/button-card.js
    type: module
  • url: /local/popup-card.js
    type: js

CUSTOM POPUP WITH CONDITIONAL TO SELECT MORE THAN ONE CONTROL

  - type: custom:popup-card
    entity: input_boolean.controle_remoto_sala
    title: Bedside lamp settings
    card:
      type: vertical-stack
      cards:
        - type: entities
          title: Boolean
          show_header_toggle: true
          entities:
          - entity: input_boolean.controle_remoto_quarto
            name: A TV da sala está
          - entity: input_boolean.controle_remoto_quarto
            name: O HTV da sala está                  
        - type: horizontal-stack  
          cards:
            - type: "custom:button-card"
              entity: input_boolean.controle_remoto_sala_tv
              tap_action: toggle
              icon: mdi:television-box
              name: Controle da TV
              size: 30%
              style:                      
                - --disabled-text-color: white
                - height: 100px                      
            - type: "custom:button-card"
              entity: input_boolean.controle_remoto_sala_htv
              tap_action: toggle
              icon: mdi:youtube-tv
              size: 30%                    
              name: Controle do HTV
              style:
                - --disabled-text-color: white
                - height: 100px
        - type: horizontal-stack  
          cards:
            - type: "custom:button-card"
              entity: input_boolean.controle_remoto_sala
              tap_action: more_info
              icon: mdi:none               
              name: Fechar
              style:
                - font-size: 12px
                - font-weight: bold                    
                - height: 3em
REMOTE CONTROL
        - type: vertical-stack
          cards:
          - type: conditional
            conditions:
              - entity: input_boolean.controle_remoto_sala_htv
                state: "on"
            card: 
              type: vertical-stack
              cards:
                - type: horizontal-stack  
                  cards:
                    - type: "custom:button-card"
                      entity: script.tv_power_on_off
                      tap_action: toggle
                      icon: mdi:power
                      name: TV                    
                      style:
                        - background-color: red
                        - height: 6em
                        - --disabled-text-color: white
                        - font-weight: bold
                    - type: "custom:button-card"
                      entity: script.controle_tv_sala_seta_cima
                      icon: mdi:cellphone-link
                      name: Source    
                      style:
                        - height: 6em
                        - --disabled-text-color: white
                        - font-weight: bold
                    - type: "custom:button-card"
                      entity: script.tv_power_on_off
                      tap_action: toggle
                      icon: mdi:power
                      name: HTV
                      style:
                        - background-color: red
                        - height: 6em
                        - --disabled-text-color: white
                        - font-weight: bold

                - type: horizontal-stack 
                  cards:
                    - type: "custom:button-card"
                      entity: script.htv_number_1
                      tap_action: toggle
                      icon: mdi:numeric-1-box
                      style:
                        - height: 4.5em
                        - --disabled-text-color: white
                    - type: "custom:button-card"
                      entity: script.htv_number_2
                      tap_action: toggle
                      icon: mdi:numeric-2-box
                      style:
                        - height: 4.5em
                        - --disabled-text-color: white
                    - type: "custom:button-card"
                      entity: script.htv_number_3
                      tap_action: toggle
                      icon: mdi:numeric-3-box
                      style:
                        - height: 4.5em
                        - --disabled-text-color: white
                    - type: "custom:button-card"
                      entity: script.htv_volume_up
                      icon: mdi:volume-plus
                      style:
                        - height: 4.5em
                - type: horizontal-stack 
                  cards:
                    - type: "custom:button-card"
                      entity: script.htv_number_4
                      tap_action: toggle
                      icon: mdi:numeric-4-box
                      style:
                        - height: 4.5em
                        - --disabled-text-color: white
                    - type: "custom:button-card"
                      entity: script.htv_number_5
                      tap_action: toggle
                      icon: mdi:numeric-5-box
                      style:
                        - height: 4.5em
                        - --disabled-text-color: white
                    - type: "custom:button-card"
                      entity: script.htv_number_6
                      tap_action: toggle
                      icon: mdi:numeric-6-box
                      style:
                        - height: 4.5em
                        - --disabled-text-color: white
                    - type: "custom:button-card"
                      entity: script.htv_volume_mute
                      icon: mdi:volume-off
                      style:
                        - height: 4.5em

                - type: horizontal-stack 
                  cards:
                    - type: "custom:button-card"
                      entity: script.htv_number_7
                      tap_action: toggle
                      icon: mdi:numeric-7-box
                      style:
                        - height: 4.5em
                        - --disabled-text-color: white
                    - type: "custom:button-card"
                      entity: script.htv_number_8
                      tap_action: toggle
                      icon: mdi:numeric-8-box
                      style:
                        - height: 4.5em
                        - --disabled-text-color: white
                    - type: "custom:button-card"
                      entity: script.htv_number_9
                      tap_action: toggle
                      icon: mdi:numeric-9-box
                      style:
                        - height: 4.5em
                        - --disabled-text-color: white
                    - type: "custom:button-card"
                      entity: script.htv_volume_down
                      icon: mdi:volume-minus
                      style:
                        - height: 4.5em 

                - type: horizontal-stack 
                  cards:
                    - type: "custom:button-card"
                      entity: script.htv_period
                      icon: mdi:none
                      name: .
                      style:
                        - height: 4.5em
                    - type: "custom:button-card"
                      entity: script.htv_number_0
                      tap_action: toggle
                      icon: mdi:numeric-0-box
                      style:
                        - height: 4.5em
                        - --disabled-text-color: white
                    - type: "custom:button-card"
                      entity: script.htv_del
                      icon: mdi:none
                      name: Del
                      style:
                        - height: 4.5em
                    - type: "custom:button-card"
                      entity: script.htv_goto
                      icon: mdi:none
                      name: Goto
                      style:
                        - height: 4.5em

                - type: horizontal-stack 
                  cards:
                    - type: "custom:button-card"
                      entity: script.htv_menu
                      icon: mdi:none
                      name: Menu
                      style:
                        - height: 4.5em
                    - type: "custom:button-card"
                      entity: script.htv_menu_up
                      icon: mdi:menu-up
                      style:
                        - height: 4.5em
                    - type: "custom:button-card"
                      entity: script.htv_exit
                      icon: mdi:none
                      name: Exit
                      style:
                        - height: 4.5em
                    - type: "custom:button-card"
                      entity: script.htv_p_plus
                      icon: mdi:none
                      name: P +
                      style:
                        - height: 4.5em

                - type: horizontal-stack 
                  cards:
                    - type: "custom:button-card"
                      entity: script.htv_menu_left
                      icon: mdi:menu-left
                      style:
                        - height: 4.5em                          
                    - type: "custom:button-card"
                      entity: script.htv_menu_ok
                      icon: mdi:none                      
                      name: "OK"
                      style:
                        - height: 4.5em
                        - font-weight: bold
                    - type: "custom:button-card"
                      entity: script.htv_menu_right
                      icon: mdi:menu-right
                      style:
                        - height: 4.5em
                    - type: "custom:button-card"
                      entity: script.htv_mouse
                      icon: mdi:mouse
                      style:
                        - height: 4.5em

                - type: horizontal-stack 
                  cards:
                    - type: "custom:button-card"
                      entity: script.htv_home
                      icon: mdi:none
                      name: Home
                      style:
                        - height: 4.5em
                    - type: "custom:button-card"
                      entity: script.htv_menu_down
                      icon: mdi:menu-down
                      style:
                        - height: 4.5em
                    - type: "custom:button-card"
                      entity: script.htv_info
                      icon: mdi:none
                      name: Info
                      style:
                        - height: 4.5em
                    - type: "custom:button-card"
                      entity: script.htv_p_minus
                      icon: mdi:none
                      name: P -
                      style:
                        - height: 4.5em

                - type: horizontal-stack 
                  cards:
                    - type: "custom:button-card"
                      entity: script.htv_favorite
                      icon: mdi:none
                      name: Favoritar
                      style:
                        - background-color: rgb(255,0,0)
                        - height: 3em
                        - font-weight: bold
                    - type: "custom:button-card"
                      entity: script.htv_order
                      icon: mdi:none
                      color_type: card
                      default_color: red
                      name: Ordenar
                      style:
                        - background-color: rgb(154,205,50)
                        - height: 3em
                        - font-weight: bold
                        - color: rgb(51,51,0)                        
                    - type: "custom:button-card"
                      entity: script.htv_mouse
                      icon: mdi:none
                      name: Mouse
                      style:
                        - background-color: rgb(255,255,102)
                        - height: 3em
                        - font-weight: bold
                        - color: rgb(51,51,0)
                    - type: "custom:button-card"
                      entity: script.htv_back
                      icon: mdi:none
                      name: Voltar
                      style:
                        - background-color: rgb(25,25,112)
                        - height: 3em
                        - font-weight: bold

                - type: horizontal-stack  
                  cards:
                    - type: "custom:button-card"
                      entity: group.controle_remoto_sala
                      tap_action: toggle
                      icon: mdi:none                
                      name: Fechar
                      style:
                        - font-size: 12px
                        - font-weight: bold                    
                        - height: 3em
1 Like

I was able to resolve the issue on my phone by adding the following line:

moreInfo.style.height = ‘auto’;

Another line I added was:

moreInfo.style.top = ‘0’;

Now it’s perfect! Thank you very much!!!

@thomasloven Did you see that? https://github.com/thomasloven/lovelace-layout-card/issues/3

No, I had actually missed that one somehow.

No cards inside other cards are editable as of now. The same happens with normal stacks.

I didn’t know that, thanks for information.

Is there any way to have a kind of blank section/separator and still show the label?

Something like this:




If not, any chance of adding something like this? :slightly_smiling_face:

That’s actually the reason the section row even exists: https://www.home-assistant.io/lovelace/entities/#section

See illustrations on github or in the post you replied to.

Sorry, I don’t understand :blush:

Are you saying it is or isn’t possible to hide the line for the section?

Oh. Sorry. No, that’s not possible.

Perhaps a weblink row with a blank icon?

Ah, OK. I’ll look at that, thanks.

I have problems on my fire tablet displaying Lovelace via fully kiosk. The info in the Lovelace doesn’t get updated in real-time. I guess it’s related to this issue. May I know do you have any solution to this? I have tried sideloading the latest webview because I have no idea where to update it in fire os but it doesn’t work.

1 Like

@thomasloven is it possible to use card-modder to hide an element on a card? For example, I’m using the picture-glance card and would like to hide the transparent overlay at the bottom, the whole div if possible.

Normally with CSS I would just apply display:none to .box, but I can’t work it out with card-modder.

What I believe you wish to do can be done with picture-elements instead. With your picture as both the background and as an image element.

- type: picture-elements
  image: yourimage.png
  elements:
    - type: image
      image: yourimage.png
      entity: light.light_to_toggle_or_whatever
      style:
        left: 50%
        top: 50%
        width: 100%
        height: 100%

I guess I found at least a first step to solve the problem
I have removed

row.addEventListener('click', (e) => {
  let ev = new Event('hass-more-info', {
    bubbles: true,
    cancelable: false,
    composed: true,
  });
  const entityId = data.entity;
  ev.detail = { entityId };
  this.dispatchEvent(ev);
  e.stopPropagation();
});

from function _addRow

now the input select works. It seems all the rest still works also

Thanks mate. Didn’t know that a camera could be used with the picture-elements card. More lines of code but it does the job. :+1:

@gabrielmiranda so your remote card pops up and gives you control over the TV? I need to save your config, that’s awesome!

layout-card.js:36:10 Uncaught TypeError: card.setConfig is not a function,I do not know how to revise,I need your help.:joy:

Please show your config.
You’re trying to add something that’s not a card, or possibly something that’s not a card yet - such as a custom card that hasn’t loaded…

title: Homever
resources:
  - url: /local/card-modder.js   #自定义卡片主题的JS文件
    type: module
  - url: /local/layout-card.js   #自定义卡片排列
    type: js
views:
  - title: 主页
    panel: true
    #theme: midnight
    #background: rgb(55,70,79)
    #background: center 5%/100% 150% no-repeat url("/local/picture/bjt1.jpg") fixed #主页背景图
    cards:
      - type: custom:layout-card
        layout: horizontal
        cards:
          - type: custom:card-modder
            style:
              width: 492px
              height: 300px
              #--paper-card-background-color: white  
              # border: 2px solid skyblue  #边框颜色
              border-radius: 8px  #边框角的圆滑度
              --paper-item-icon-color: skyblue #卡片图标颜色
              color: black #卡片字体颜色
              background: rgba(0, 100, 0, 0.2)  #透明色背景
            card:
              type: weather-forecast
              entity: weather.localweather
          - type: custom:card-modder
            style:
              border-radius: 8px  #边框角的圆滑度
              color: black #卡片字体颜色
              background: rgba(0, 100, 0, 0.2)  #透明色背景
            card:
              type: entities
              entities:
                - input_number.cover105
                - input_number.cover106      
                - input_number.cover107
                - input_number.cover108
                - input_number.cover111
                - input_number.cover112

Thank you for your reply. This is my config