Copy Lovelace yaml code fragments to own manual card / Handling

Liese · April 28, 2020, 5:31pm

Hi,
is there an easy way of handling given code fragments from people, who do share their code into your own i.e. lovelace file?
Running Hassio 108.9 I wanted to open a new manual card and include i.e. following code

type: 'custom:vertical-stack-in-card'
cards:
  - type: entities
    entities:
      - type: 'custom:text-divider-row'
        text: HP 6070 Infos
      - type: 'custom:bar-card'
        columns: 4
        entities:
          - sensor.hp_6970_ink_black
          - sensor.hp_6970_ink_cyan
          - sensor.hp_6970_ink_magenta
          - sensor.hp_6970_ink_yellow
        height: 200px
        min: 0
        max: 100
        width: 100px
        direction: up
        align: center-split
        title_position: inside
        severity:
          - color: '#ff0000'
            value: 10
          - color: '#bf4040'
            value: 25
          - color: '#d3db39'
            value: 60
          - color: '#40bf40'
            value: 100
  - type: markdown
    content: >
      [HP 6970 Weboberfläche](http://192.168.1.66)
          
      - <ha-icon icon="mdi:counter"></ha-icon> - Druck Counter: **{{
      sensor.hp_6970_printer }}** Seiten

      - <ha-icon icon="mdi:cancel"></ha-icon> - Druck ABBRÜCHE: **[[
      sensor.hp_6970_printer.attributes.Cancelled ]]** Seiten

      - <ha-icon icon="mdi:scanner"></ha-icon> - Scan Vorgänge: **[[
      sensor.hp_6970_scanner ]]** Seiten

The problem is, that in ‘MANUAL CARD’ it seems, that the leading spaces and indentations are complete different. So for longer fragments and as a beginner it ends up in try and error…

My 2nd attempt was, to open the YAML Raw Configurator after creating an empty manual card.
I wanted afterwards to copy paste the code from Notepad++.
In Notepad++ I can use Column mode to add/delete spaces over the complete code fragment.
I thought , that is a good way. But after copying to RAW Configurator the YAML parser launches errors - looks like it is not that easy.

Is there a way I am missing?
Easier to go?

YAML seems - so far - not to be my friend
Maybe we are getting closer in Corona times

Regards,
Jörg

Code examples from

petro · April 28, 2020, 5:42pm

That’s not true they are the same. If you took that code snip above and pasted it into a manual card, it should work as is.

The things that stand out about that snip above is that it uses 3 custom cards and 2 built in cards. You’ll get errors if you haven’t added the custom card resources.

Liese · April 28, 2020, 8:12pm

Hi,
I have tried exactly that.
I pasted following code and at line 45 I get message

end of the stream or a document separator is expected at line 45, column 13: - type: markdown ^
----- That is exactly the line ‘maarkdown’ below comment #white color —

                - type: custom:text-divider-row
                  text: HP 
                - entity: binary_sensor.hp_6970_connectivity
                - type: custom:bar-card
                  style: |-
                    bar-card-value {
                      margin-right: auto;
                      font-size: 23px;
                      font-weight: bold;
                      text-shadow: 1px 1px #0005;
                    }
                  columns: 4
                  entity_row: true
                  direction: up
                  stack: horizontal
                  entities:
                    - color: black
                      entity: sensor.hp_6970_ink_black
                      name: Black
                    
                    - color: '#00ffff'
                      entity: sensor.hp_6970_ink_cyan
                      name: Cyan
                  
                    - color: '#ff00ff'
                      entity: sensor.hp_6970_ink_magenta
                      name: Magenta
                     
                    - color: '#ffff00'
                      entity: sensor.hp_6970_ink_yellow            
                      name: Yellow 
                                       
                  height: 150px
                  min: 0
                  max: 100
                  padding: 10px
                  target: 20
                  title_position: bottom
                  align: center-split
                  icon_position: inside
                  unit_of_measurement: '%'
                  width: 100%
                 # color: white
    
            - type: markdown
              style: |
                 ha-card {
                   font-size: 18px;
                 }
              content: |
                     [HP Photosmart 5510 B111a Weboberfläche](http://192.168.1.121)
                     
                     - <ha-icon icon="mdi:counter"></ha-icon> - Druck Counter: **{{states('sensor.hp_6970_printer')}}** Seiten
                     - <ha-icon icon="mdi:cancel"></ha-icon> - Druck ABBRÜCHE: **{{states.sensor.hp_6970_printer.attributes.Cancelled}}** Seiten
                     - <ha-icon icon="mdi:scanner"></ha-icon> - Scan Vorgänge: **{{states('sensor.hp_6970_scanner')}}** Seiten
                     - <ha-icon icon="mdi:bible"></ha-icon> - Papier Stau: **{{states.sensor.hp_6970_printer.attributes.Jams}}** mal
            - type: entities
              entities:
                - entity: sensor.hp_6970_ink_black
                  style: |
                    :host {
                     --paper-item-icon-color: black;
                    }
                  type: custom:multiple-entity-row
                  name: Ink Black
                  icon: mdi:invert-colors
                  name_state: Füllstand
                  entities:
                    - attribute: Installed At
                      name: Eingebaut am
                    - attribute: Warranty Expiration Date
                      name: Läuft ab am
                    
                - entity: sensor.hp_6970_ink_cyan
                  style: |
                    :host {
                     --paper-item-icon-color: cyan;
                    }
                  type: custom:multiple-entity-row
                  name: Ink Cyan
                  icon: mdi:invert-colors
                  name_state: Füllstand
                  entities:
                    - attribute: Installed At
                      name: Eingebaut am
                    - attribute: Warranty Expiration Date
                      name: Läuft ab am
                - entity: sensor.hp_6970_ink_magenta
                  style: |
                    :host {
                     --paper-item-icon-color: magenta;
                    }
                  type: custom:multiple-entity-row
                  name: Ink Magenta
                  icon: mdi:invert-colors
                  name_state: Füllstand
                  entities:
                    - attribute: Installed At
                      name: Eingebaut am
                    - attribute: Warranty Expiration Date
                      name: Läuft ab am
                - entity: sensor.hp_6970_ink_yellow
                  style: |
                    :host {
                     --paper-item-icon-color: yellow;
                    }
                  type: custom:multiple-entity-row
                  name: Ink Yellow
                  icon: mdi:invert-colors
                  name_state: Füllstand
                  entities:
                    - attribute: Installed At
                      name: Eingebaut am
                    - attribute: Warranty Expiration Date
                      name: Läuft ab am

Greetz
Jörg

petro · April 28, 2020, 8:22pm

Because what your pasting is not valid.

This whole section prior to the markdown card belongs inside an entities card. You’re missing that whole bit. So the yaml parser complains when it gets to the markdown line which has a different indentation level.


/  16 spaces   \
                - type: custom:text-divider-row
                  text: HP 
                - entity: binary_sensor.hp_6970_connectivity
                - type: custom:bar-card
                  style: |-
                    bar-card-value {
                      margin-right: auto;
                      font-size: 23px;
                      font-weight: bold;
                      text-shadow: 1px 1px #0005;
                    }
                  columns: 4
                  entity_row: true
                  direction: up
                  stack: horizontal
                  entities:
                    - color: black
                      entity: sensor.hp_6970_ink_black
                      name: Black
                    
                    - color: '#00ffff'
                      entity: sensor.hp_6970_ink_cyan
                      name: Cyan
                  
                    - color: '#ff00ff'
                      entity: sensor.hp_6970_ink_magenta
                      name: Magenta
                     
                    - color: '#ffff00'
                      entity: sensor.hp_6970_ink_yellow            
                      name: Yellow 
                                       
                  height: 150px
                  min: 0
                  max: 100
                  padding: 10px
                  target: 20
                  title_position: bottom
                  align: center-split
                  icon_position: inside
                  unit_of_measurement: '%'
                  width: 100%
                 # color: white

/10 spaces \
            - type: markdown
              style: |
                 ha-card {
                   font-size: 18px;

You can’t just paste things without understanding the spacing. Your first example would work exactly. This second bit that you posted is so far from wrong that you can’t really fix it without heavy modifications.

Liese · April 28, 2020, 8:39pm

OK, but if I post only the 1rst 2 lines (with eliminated 16 spaces):

- type: custom:text-divider-row
  text: HP

The result is
CodeCopy-direct-1
If I delete the indent and adapt the general structure it works in Manual Card:
CodeCopy-direct-2

Even if I delete the 16 spaces in the 1st section (easy to do with Notepad++ Column Mode) for every line, I get the ‘No Card type found error’.

Is that normal behaviour, as it should be?

Greetz

petro · April 28, 2020, 9:16pm

Yep, because it’s not formatted correctly as I said before.

Notice your original post, starts with no dash ( - ), it’s valid.

type: 'custom:vertical-stack-in-card'
cards:
  - type: entities

Notice what you keep trying in all your other examples:

- type: custom:text-divider-row
  text: HP

eggman · April 28, 2020, 9:19pm

personally, I’d use other people’s examples as learning experience. Why cut and paste if you have no idea what it means?

Read the docs, experiment, ask questions, use other’s config as a working example.

petro · April 28, 2020, 9:25pm

So, seems like you don’t understand yaml. I had a conversation with a guy that didn’t understand it either about a month ago and I tried to explain it to him a few different ways.

Here’s that thread, maybe it can help you.

It starts here:

and ends here:

Liese · April 28, 2020, 9:36pm

Hi petro, thanks for your patience.
I used to do some programming in the past - not many - and it’s some years ago, but from that experience, my idea is, that if I have a part of a code i.e. inside an upper level structure and I cut this code part off, I can use it separately as well. (as far as all variables are defined etc)
At least the structure should be ok, if I cut the leading 16 spaces.

The original code is linked in my 1st post at the bottom.
It includes the indent
- type: custom:text-divider-row

The 1st code I posted has already been modified by me, because I experienced that manual card works, if the indent is deleted. I already used another code part, where I changed every line adding spaces etc.

For me, it seems that a code copy/paste and changing some variables/entities is not easy possible here. If coders invest already a lot of time - and imho YAML is quite time consuming - to create a lovelace card with all details of markdown etc. I thought it is easy and achievable for HA starters to copy / paste the code and use it.

But OK, it seems not to be that way
Thanks so far

petro · April 28, 2020, 9:39pm

Yep, yaml can be a pain. But it’s really only bad because you’re using the frontend. If you move to full yaml mode, you’ll be able to use it as you intend to use it. When you use the frontend, it ‘hides’ stuff that contextually is meaningless to the current card that you’re working on. If you take a look at the posts i linked above, you’ll see what I mean.

CentralCommand · April 28, 2020, 9:46pm

Yea I liked having the front end as an option to get started so I can use the GUI to try out cards and see how the YAML looks. And I still leave it as front-end editable so I can do that once in a while, mainly to try something out when responding here. But I basically just use the raw configuration option.

A neat trick for copying and pasting if you happen to use sublime text editor is when you do CMD+Shift+V to paste it automatically fixes the indenting for you. So often I copy my raw config over to sublime, paste what I’m adding in there to let it fix the indenting then copy it back. I’m sure other text editors do this as well.

Liese · April 30, 2020, 9:29am

OK, I gave up on markdown for now.
Took the first part and deleted until type: custom-card is in 1st column.
With all mirror strokes deleted.
For this part only:

/  16 spaces   \
                - type: custom:text-divider-row
                  text: HP 
                - entity: binary_sensor.hp_6970_connectivity
                - type: custom:bar-card
                  style: |-
                    bar-card-value {
                      margin-right: auto;
                      font-size: 23px;
                      font-weight: bold;
                      text-shadow: 1px 1px #0005;
                    }
                  columns: 4
                  entity_row: true
                  direction: up
                  stack: horizontal
                  entities:
                    - color: black
                      entity: sensor.hp_6970_ink_black
                      name: Black
                    
                    - color: '#00ffff'
                      entity: sensor.hp_6970_ink_cyan
                      name: Cyan
                  
                    - color: '#ff00ff'
                      entity: sensor.hp_6970_ink_magenta
                      name: Magenta
                     
                    - color: '#ffff00'
                      entity: sensor.hp_6970_ink_yellow            
                      name: Yellow 
                                       
                  height: 150px
                  min: 0
                  max: 100
                  padding: 10px
                  target: 20
                  title_position: bottom
                  align: center-split
                  icon_position: inside
                  unit_of_measurement: '%'
                  width: 100%
                 # color: white

And then it worked and finally at 109.0 HA version (don’t know if that would have happen earlier as well) there is an additional card configuration menu!

Simply nice.

So custom-card component is required.
HP-Ink-Card

Thanks for your hints.