Lovelace: Bar Card

[devastator]

Mmmz

Hard reloaded, cleared cache but still loads old version.

[DavidFW1960 (David)]

HACS sometimes does that… try downloading again. Is HACS up-to-date?

[Gluwc (Lucas Bramlage)]

Ah yes it’s been renamed to bar-card-markerbar, sorry I didn’t quite keep track of all the element changes very well. I’ve fixed this one in the docs and I’ll see if I have some time later to check the rest.

One thing I’m still not quite sure about is why you’re offsetting all the bars in CSS? If you want to reduce the padding around the bar it’s much easier to just do this:

  #states {
    padding: 8px;
  }

Also you can set the border radius of the bars using a theme variable.

[Mariusthvdb (Marius)]

answering myself for reference: missed the change to ‘module’ from ‘js’ in resources. Now loading and showing fine.

as posted on https://github.com/custom-cards/bar-card/issues/65#issuecomment-620572904, can’t we disable showing the expected entity icons? My entities use an entity_picture, and I dont want that displayed below the bars.:

[jimpower]

I’m using the bar as part of a custom:stack-in-card and I’m manipulating it’s position within that card.

[szat688 (Attila)]

Here is my thermometer inspired temperature bar-card.

I’m sure that the code could be cleaner, but I’m not a CSS mage. Btw it works fine.

entities:
  - entity: sensor.shelly_homerseklet_halo
    name: Emelet
  - entity: sensor.heating_temperature
    name: Földszint
  - entity: sensor.shelly_homerseklet_pince
    name: Pince
  - entity: sensor.dark_sky_temperature
decimal: 1
max: 40
min: 10
severity:
  - color: '#0080FF'
    from: '0'
    to: '19'
  - color: '#40bf40'
    from: '19'
    to: '22'
  - color: '#bf9540'
    from: '22'
    to: '25'
  - color: '#c0392b'
    from: '25'
    to: '40'
direction: up
height: 150px
width: 24px
positions:
  indicator: inside
  icon: 'off'
style: |-
  .card-header {
    font-size: 18px;
  }
  bar-card-value, bar-card-name {
    font-size: 12px;
    transform-origin: 0 0;
    transform: rotate(270deg);
    text-shadow: 1px 1px #0008;
    white-space: nowrap;
  }
  bar-card-value {
    margin-right: auto;
    margin-left: 6px;
    margin-bottom: auto;
    margin-top: auto;
  }
  bar-card-name {
    margin-right: auto;
    margin-left: 0px;
    margin-bottom: -130px;
    margin-top: 130px;
    right: 20px;
  }
  bar-card-currentbar, bar-card-backgroundbar {
    border-radius: 12px;
    border: 1px solid #DDD9;
  }
stack: horizontal
title: Hőmérséklet
type: 'custom:bar-card'

[maurizio53 (Maurizio Fabiani)]

Getting tons of this error after upgrading to the latest release:

2020-04-29 15:39:53 ERROR (MainThread) [frontend.js.latest.202004072] https://xxxxxxxx.duckdns.org/hacsfiles/bar-card/bar-card.js:5340:1 Uncaught SyntaxError: Unexpected token 'export'
2020-04-29 15:42:46 ERROR (MainThread) [frontend.js.latest.202004072] https://xxxxxxxx.duckdns.org/hacsfiles/bar-card/bar-card.js:5340:1 Uncaught SyntaxError: Unexpected token 'export'
2020-04-29 15:43:17 ERROR (MainThread) [frontend.js.latest.202004072] https://xxxxxxxx.duckdns.org/hacsfiles/bar-card/bar-card.js:5340:1 Uncaught SyntaxError: Unexpected token 'export'

And in the frontend i get ‘Custom element doesn’t exist: bar-card.’
How to fix?

[acme]

Go to:
Configuration -> Lovelace Dashboards->Resources
and check if you have it like this:

I had the same problem and when I changed it from “JavaScript File (deprecated)” to “JavaScript Module”, it worked!
thx to @hajo62

[maurizio53 (Maurizio Fabiani)]

Yes i got it! Thanks

[VMCosco]

I had this set up fine before but I am guessing that I missed a change or something. What element do I have to change to have the right margin, match the left? The is in just a bit from the edge. I have the margins under bar-card-card both set for 7px. This used to work.

    style: |-
      bar-card-card {
        margin-left: 7px;
        margin-right: 7px;
        margin-top: 10px;
      }
      bar-card-value {
        font-size: 18px;
        font-weight: bold;
        margin-right: 215px;
      }
      bar-card-title {
        font-size: 14px;
        font-weight: bold;
        margin-left: 20px;
      }

[jimpower]

Change bar-card-title to bar-card-name

[VMCosco]

Thanks. That actually fixed another issue. I was actually referring to this margin

[jimpower]

You can use margin or padding right / left where you are using it no longer applies as I discovered. You will need to apply it the the bar-card-bar elements instead. I am not at my pc but background and another should get it done.

[mase]

shouldn´t

   style: |
     bar-card-background {
       color: var(--dwains-theme-names);
     }

change the color of the background?

[Gluwc (Lucas Bramlage)]

Depends on what background you’re trying to change, but that element only contains all the bar elements including the bar background. You probably either want bar-card-backgroundbar or ha-card.

[mase]

i´m an idiot. got it working with

style: |
     ha-card {
       background-color: var(--dwains-theme-primary);
     }

[sendorm]

This is my current setup still on bar-card version 2.0.2. It uses horizontal and vertical stacks.

Is there a way to have the same thing with ver 3.x?
Thank you.

[Gluwc (Lucas Bramlage)]

Having the name and value like that requires some custom CSS, however you can get the layout very easily by putting all the entities in a single barcard and setting columns to 4.

[sendorm]

After some fiddling around, I was able to get this:

Only two things missing now. To add a shadow to the sensor itself and to make the indicator arrow to be on the right side.

[mase]

mind sharing your code?