Custom-Button-Card: Size Grid Area

andyowl · August 2, 2021, 12:26am

Hello,
I have created a grid with a title and 2 columns and 2 rows.
I have assigned each area an exact height and width (65x65). But it is not converted. Where is my thinking error?
Here is my Code

type: custom:button-card
name: Preise E10
styles:
  grid:
    - grid-template-columns: 1fr 1fr
    - grid-template-rows: 1fr 1fr 1fr
    - grid-template-areas: ' "n n" "ijet pjet" "iaral paral"'
    - column-gap: 5px
    - row-gap: 5px
    - border: solid 1px
    - height: 135px
    - height: 135px
  card:
    - border-radius: 0%
    - width: 135px
    - height: 135px
    - padding: 1%
    - font-size: 10px
  custom_fields:
    pjet:
      - border: solid 1px
      - justify-self: center;
      - align-self: center;
      - grid-area: paral;
      - width: 65px;
      - height: 65px;
      - padding: 2px
    ijet:
      - border: solid 1px
      - justify-self: center;
      - align-self: center;
      - grid-area: ijet;
      - width: 65px;
      - height: 65px;
      - padding: 2px
    iaral:
      - border: solid 1px
      - justify-self: center;
      - align-self: center;
      - width: 65px;
      - height: 65px;
      - justify-self: center;
      - align-self: center;
      - padding: 2px
    paral:
      - border: solid 1px
      - justify-self: center;
      - align-self: center;
      - grid-area: paral;
      - width: 65px;
      - height: 65px;
      - padding: 2px
  name:
    - font-weight: bold
    - border: solid 1px
    - color: '#000'
    - font-size: 12px
    - padding: 2px
    - justify-self: middle
    - align-self: top
    - width: 65px;
    - height: 65px;
custom_fields:
  pjet: >
    [[[ return
    states['sensor.tankerkoenig_jet_wuelfrath_wilhelmstr_34_38_e10'].state; ]]]
  ijet: |
    [[[
      return ' Logo Jet' 
    ]]]
  paral: |
    [[[
      return states['sensor.tankerkoenig_aral_tankstelle_e10'].state
    ]]]
  iaral: |
    [[[
      return ' Logo ARAL' 
    ]]]

HAforum6
Thanks and kind regards,

Andreas

pedolsky · August 2, 2021, 11:09am

You „heighted“ twice in your code, see line 12.

andyowl · August 2, 2021, 5:00pm

Hi,
Thanks for this note, the same result,
I no understand why he does not take into account the data for height and weight.

Thanks and kind regards

Andreas

pedolsky · August 2, 2021, 5:25pm

Ah, I’ve seen it at second glance now. Remove the semicolons.

andyowl · August 2, 2021, 6:08pm

Hi, you are my hero. This is the right solution.
Thanks
Andreas

andyowl · August 2, 2021, 6:13pm

Is possible you can help me in this case?

I try insert image from folder config/image.

Thanks I’m advance

Andreas

pedolsky · August 2, 2021, 6:52pm

Looks cute!

Try something like this in your custom_field:


    return `<img src="/local/PATH/TO/YOUR/IMAGE">`

andyowl · August 17, 2021, 8:36pm

Hi,
here is my result from my work and your help.

Thanks in advance

Andreas HAforum9

pedolsky · August 17, 2021, 9:02pm

Really cool work, congrats!

andyowl · January 13, 2022, 10:29pm

Hi,

what do I have to do to get both cards in one custom card next to each other?

Thanks and kind regards,
Andy

pedolsky · January 14, 2022, 7:01am

Use custom_fields : https://github.com/custom-cards/button-card#custom-fields

andyowl · February 3, 2022, 7:42pm

Hi,
i create a cutom:button card with 4 frames (please read below code) i no understand what is my problem if i insert below second code in frame 1. can you help me?

Thanks and kiind regards,
Andreas

type: custom:button-card
name: Erdgeschoss
styles:
  grid:
    - grid-template-columns: 1fr 1fr
    - grid-template-rows: 1fr 1fr 1fr
    - grid-template-areas: ' "grid1 grid2" "grid3 grid4"'
    - column-gap: 5px
    - row-gap: 5px
    - border: solid 0px
    - border-color: '#000'
    - height: 200px
    - width: 300px
    - margin: 5px 5px
    - showname: false
  card:
    - border-radius: 9%
    - width: 270px
    - height: 200px
    - font-size: 10px
  custom_fields:
    grid1:
      - background-color: '#0000FF'
      - border: solid 3px
      - border-radius: 9px
      - border-color: '#000'
      - align-items: center
      - justify-content: center
      - display: flex
      - width: 100px
      - height: 100px
      - font-size: 12px
      - font-weight: bold
      - color: '#fff'
      - margin-left: 5px
      - margin-top: 5px
    grid2:
      - background-color: '#00FF00'
      - border: solid 3px
      - border-radius: 9px
      - border-color: '#000'
      - align-items: center
      - justify-content: center
      - display: flex
      - width: 130px
      - height: 100px
      - font-size: 12px
      - font-weight: bold
      - color: '#fff'
      - margin-left: 0px
      - margin-top: 5px
    grid3:
      - background-color: '#ffff00'
      - border: solid 3px
      - border-radius: 9px
      - border-color: '#000'
      - align-items: center
      - justify-content: center
      - display: flex
      - width: 100px
      - height: 65px
      - font-size: 12px
      - font-weight: bold
      - color: '#000'
      - margin-left: 5px
    grid4:
      - background-color: '#FF0000'
      - border: solid 3px
      - border-radius: 9px
      - border-color: '#000'
      - align-items: center
      - justify-content: center
      - display: flex
      - width: 130px
      - height: 65px
      - font-size: 12px
      - font-weight: bold
      - color: '#000'
custom_fields:
  grid2: |
    [[[  return `Frame2` ]]]      
  grid1: |
    [[[
    return `Frame1`
    ]]]
  grid4: |
    [[[ 
    return `Frame4`
    ]]]      
  grid3: |
    [[[
    return `Frame3`
    ]]]

forum1
Code from my card if i like insert in the frame 1

type: custom:button-card
name: Müllabfuhr
styles:
  custom_fields:
    bio:
      - border: solid 5px
      - border-color: ' [[[  if (states["sensor.abfallbiotonne2"].state < 2) return "#ff0a00";  else return "#369b04" ]]] '
      - border-radius: 50%
      - width: 20px
      - heigth: 20px
      - font-weight: bold
      - font-size: 15px
      - color: ' [[[  if (states["sensor.abfallbiotonne2"].state < 2) return "#ff0a00";  else return "#369b04" ]]] '
      - height: 20px
      - background-color: '#FFFFFF'
      - justify-self: center
      - padding: 2px
    ibio:
      - border: solid 5px
      - border-color: ' [[[  if (states["sensor.abfallbiotonne2"].state <= 2)  return "#ff0a00";  if (states["sensor.abfallbiotonne2"].state <= 5 && states["sensor.abfallbiotonne2"].state > 2)  return "#FF8000"; else return "#369b04" ]]] '
      - border-radius: 50%
      - width: 20px
      - heigth: 20px
      - font-weight: bold
      - font-size: 15px
      - background-color: '#A52A2A'
      - padding: 2px
      - animation: ' [[[  if (states["sensor.abfallbiotonne2"].state <= 2)  return "blink  .7s linear infinite";  if (states["sensor.abfallbiotonne2"].state <= 5 && states["sensor.abfallbiotonne2"].state > 2)  return "blink 2.5s linear infinite"; ]]] '
    iyellow:
      - border: solid 5px
      - border-color: ' [[[  if (states["sensor.abfallgelbersack2"].state <= 2)  return "#ff0a00";  if (states["sensor.abfallgelbersack2"].state <= 5 && states["sensor.abfallgelbersack"].state > 2)  return "#FF8000"; else return "#369b04" ]]] '
      - border-radius: 50%
      - width: 20px
      - heigth: 20px
      - font-weight: bold
      - font-size: 15px
      - background-color: '#FFFF00'
      - padding: 2px
      - animation: ' [[[  if (states["sensor.abfallgelbersack2"].state <= 2)  return "blink  .7s linear infinite";  if (states["sensor.abfallgelbersack2"].state <= 5 && states["sensor.abfallgelbersack2"].state > 2)  return "blink 2.5s linear infinite"; ]]] '
    yellow:
      - border: solid 5px
      - border-radius: 50%
      - border-color: ' [[[  if (states["sensor.abfallgelbersack2"].state <= 2)  return "#ff0a00";  if (states["sensor.abfallgelbersack2"].state <= 5 && states["sensor.abfallgelbersack2"].state > 2)  return "#FF8000"; else return "#369b04" ]]] '
      - width: 20px
      - heigth: 20px
      - font-size: 15px
      - font-weight: bold
      - color: ' [[[  if (states["sensor.abfallgelbersack2"].state < 2) return "#ff0a00";  else return "#369b04" ]]] '
      - background-color: '#FFFFFF'
      - justify-self: center
      - height: 20px
      - padding: 2px
    paper:
      - border: solid 5px
      - border-radius: 50%
      - border-color: ' [[[  if (states["sensor.abfallpapier2"].state <= 2)  return "#ff0a00";  if (states["sensor.abfallpapier2"].state <= 5 && states["sensor.abfallpapier2"].state > 2)  return "#FF8000"; else return "#369b04" ]]] '
      - color: ' [[[  if (states["sensor.abfallpapier2"].state < 2) return "#ff0a00";  else return "#369b04" ]]] '
      - width: 20px
      - heigth: 20px
      - font-size: 15px
      - font-weight: bold
      - background-color: '#FFFFFF'
      - height: 20px
      - justify-self: center
      - padding: 2px
    ipaper:
      - border: solid 5px
      - border-color: ' [[[  if (states["sensor.abfallpapier2"].state <= 2)  return "#ff0a00";  if (states["sensor.abfallpapier2"].state <= 5 && states["sensor.abfallpapier"].state > 2)  return "#FF8000"; else return "#369b04" ]]] '
      - border-radius: 50%
      - width: 20px
      - heigth: 20px
      - font-weight: bold
      - font-size: 15px
      - background-color: '#0404B4'
      - padding: 2px
      - animation: ' [[[  if (states["sensor.abfallpapier2"].state <= 2)  return "blink  .7s linear infinite";  if (states["sensor.abfallpapier2"].state <= 5 && states["sensor.abfallpapier2"].state > 2)  return "blink 2.5s linear infinite"; ]]] '
    rest:
      - border: solid 5px
      - border-color: ' [[[  if (states["sensor.abfallrestmuell2"].state <= 2)  return "#ff0a00";  if (states["sensor.abfallrestmuell2"].state <= 5 && states["sensor.abfallrestmuell2"].state > 2)  return "#FF8000"; else return "#369b04" ]]] '
      - border-radius: 50%
      - width: 20px
      - heigth: 20px
      - font-weight: bold
      - font-weight: bold
      - font-size: 15px
      - color: ' [[[  if (states["sensor.abfallrestmuell2"].state <= 2) return "#ff0a00";  else return "#369b04" ]]] '
      - height: 20px
      - background-color: '#FFFFFF'
      - justify-self: center
      - padding: 2px
    irest:
      - border: solid 5px
      - border-color: ' [[[  if (states["sensor.abfallrestmuell2"].state <= 2)  return "#ff0a00";  if (states["sensor.abfallrestmuell2"].state <= 5 && states["sensor.abfallrestmuell2"].state > 2)  return "#FF8000"; else return "#369b04" ]]] '
      - border-radius: 50%
      - width: 20px
      - heigth: 20px
      - font-weight: bold
      - font-size: 15px
      - background-color: '#000'
      - padding: 2px
      - animation: ' [[[  if (states["sensor.abfallrestmuell2"].state <= 2)  return "blink  .7s linear infinite";  if (states["sensor.abfallrestmuell2"].state <= 5 && states["sensor.abfallrestmuell2"].state > 2)  return "blink 2.5s linear infinite"; ]]] '
  card:
    - border-radius: 9%
    - width: 150px
    - height: 130px
    - padding: 1%
    - font-size: 10px
  grid:
    - grid-template-areas: '"n n n n" "ibio iyellow ipaper irest" "bio yellow paper rest"'
    - grid-template-rows: 1fr 1fr 1fr
    - grid-template-columns: 1fr 1fr 1fr 1fr 1fr
    - column-gap: 1.5px
    - row-gap: 6px
  name:
    - font-weight: bold
    - border: solid 0px
    - color: '#FFF'
    - font-size: 15px
    - padding-bottom: 0px
    - justify-self: middle
    - align-self: top
custom_fields:
  bio: |
    [[[ return states['sensor.abfallbiotonne2'].state; ]]]
  ibio: |
    [[[
        return `<ha-icon
          icon="mdi:trash-can"
          style="width: 20px; height: 20px; color: #FFF; ">
          </ha-icon>`
    ]]]
  yellow: |
    [[[
      return states['sensor.abfallgelbersack2'].state
    ]]]
  iyellow: |
    [[[
        return `<ha-icon
          icon="mdi:trash-can"
          style="width: 20px; height: 20px; color: black; ">
          </ha-icon>`

    ]]]
  paper: |
    [[[
    return states['sensor.abfallpapier2'].state  
    ]]]
  ipaper: |
    [[[
        return `<ha-icon
          icon="mdi:trash-can"
          style="width: 20px; height: 20px; color: white; ">
          </ha-icon>`
    ]]]
  irest: |
    [[[
        return `<ha-icon
          icon="mdi:trash-can"
          style="width: 20px; height: 20px; color: white; ">
          </ha-icon>`
    ]]]
  rest: |
    [[[
      return states['sensor.abfallrestmuell2'].state
    ]]]

pedolsky · February 3, 2022, 10:33pm

You can put any card into a custom_field in this way:


custom_fields:
  grid2: 
    card:
      type: custom:button-card
      name: Müllabfuhr
      styles:
        …
        …

Add this to your main card to ensure, that your nested sensors update properly:


type: custom:button-card
triggers_update: all
name: Erdgeschoss
styles:

        …
        …