Lovelace: Bar Card

Share your Projects! Dashboards & Frontend
424

I think they mixed in config-template-card in there to get it working like you’re expecting.

425

Yeah starting to think this is to messy to make happen and don’t want to leave static info in there. Like I’m replacing a hard drive this weekend so would have to remember to go back here and update the max value with the new hard drive space. Thinking I’ll back away from trying to use HA to monitor my servers for now. Or maybe if I switch to a percentage method would be more dynamic.

1 Like
427

So for now went with this:

image

1 Like
428

You need to use the latest version of https://github.com/iantrich/config-template-card to make this work.

429

3.1.0 now with visual editor! :tada: There might still be some bugs in the card itself since I had to rewrite most of it to fit the boilerplate template.

1011×513 31.1 KB

2 Likes
430

Getting an error with 3.1.0:
Uncaught SyntaxError: Unexpected token 'export' bar-card.js:5219

431

How can I use this editor when I am in YAML mode for the UI?

432

You can’t, for each Dashboard it’s either YAML or GUI.

I have my main yaml dashboards (cos doing anything repetitive or complex with the GUI is highly irritating / impossible). I have a seperate Dashboard that’s GUI managed and enables me to ‘play’ with GUI editors a bit and then copy the yaml if I like what I saw.

This is in my configuration.yaml

lovelace:
  mode: storage
  dashboards:
    db-mobile:
      mode: yaml
      title: Mobile
      icon: mdi:cellphone-android
      show_in_sidebar: true
      filename: db_mobile.yaml
    db-pc:
      mode: yaml
      title: PC
      icon: mdi:laptop-chromebook
      show_in_sidebar: true
      filename: db_pc.yaml

Gives me two yaml dashboards and as many more as I want configured in the UI. I make the yaml dashboards default on my devices and can navigate to the UI one(s) if I wish.

433

That is an interesting idea! I think I will have to take a look how this works.

434

Just updated and all my Bar cards are broken:

image

And how do I get the visual editor?

435

It’s now requirered to load this card as a module resource instead of js. I’ve added this to the breaking changes.
Also the visual editor should just work out of the box as long as you don’t have it embedded inside another card, it even shows up in the card picker.

436

Ok, so I need to change “js” to “module” in the lovelace_resources file? Or is there more to it?

437

Yes you have to change it in the resources file if you’re using YAML mode or in the Lovelace config page if you’re using GUI.

1 Like
438

Thank you. So much easier to edit the cards now. Love it. :smile:

1 Like
439

Hi,
Can you please advise how to remove the “margin-bottom” only from the last row in case of multiple rows, now that I see that specific ID’s were removed.

Please see for example:
zeg

Here is the code:

        - type: custom:bar-card
          style: |
            .card-content {
              padding: 6px;
            }
            #states > * {
              margin-top: 0;
            }
            bar-card-iconbar {
              color: var(--bar-card-icon-color);
            }
          unit_of_measurement: "%"
          #stack: vertical
          positions:
            icon: "inside"
            name: "inside"
            value: "inside"
            indicator: "off"
          entities:
            - entity: sensor.synology_zeg_volume_used_volume_1
              name: HD
              icon: mdi:harddisk
              color: 'rgba(117,189,111,1.0)'
            - entity: sensor.synology_zeg_cpu_load_system
              name: CPU
              icon: mdi:chip
              color: 'rgb(43, 154, 249)'
            - entity: sensor.synology_zeg_memory_usage_real
              name: Memory
              icon: mdi:memory
              color: 'rgb(87, 0, 127)'

Also, not related, seems to be something wrong with “stack: vertical” definition, had to comment it out, although this seems to be the default configuration anyway. The “stack: horizontal” on my other cards working just fine.

Thanks in advance.

440

@Gluwc absolute legend!!!
Adding entity_row:true to each entity got rid of the black space. Thanks heaps!

image

1 Like
441

This has been fixed in 3.1.1 to match the default margins of the standard HA cards for the rows inside #states. This means you only really have to reduce the #states padding to get the same result:

#states {
  padding: 8px;
}
442

Also having the bar-card doesn’t exist error. Should the install from the community store take care of installation changes? So what needs to physically be done? The concept that it needs to load as a “resource” not sure what that means. Are we saying it needs to be in our configuration.yaml or something?

443

The loading of resources for custom cards has been moved to Configuration>Lovelace Dashboards>Resources.
If you had this loaded a js file before this was moved to the config panel it’s probably still defaulting to js.

444

Thanks. So delete the www/community/barcard folder?